Master DNA

How the Master DNA is structured

The Package Level

{
    package: {
        meta: {
            "@dna": "['package.core.cms']",
            "name": "package.core.cms",
            "kind": "package"
        }
    },
    app: {
        documents: {}
    },
    web: {
        documents: {}
    }
}

The Document Level Component

{
    package: {
        meta: {
            "@dna": "['package.core.cms']",
            "name": "package.core.cms",
            "kind": "package"
        }
    },
    app: {
        documents: {
            home: {
               meta: {
                    "@dna": "['package.core.cms'].web.documents.home",
                    "@component": "['package.core.ui'].web.documents.Document",
                    "@theme": "['package.core.cms'].web.Document",
                    "name": "home",
                    "class": "Document",
                    "kind": "document"
                },
                props: {
                    "actions": [
                        {
                            "type": "GET_CONTENT_PAGE",
                            "payload": {
                                "params": {
                                    "url": "ctx.query"
                                }
                            },
                            "meta": {
                                "package": "package.core.cms"
                            }
                        },
                        {
                            "type": "GET_ARTICLES",
                            "payload": {
                                "params": {}
                            },
                            "error": false,
                            "meta": {
                                "package": "package.core.cms"
                            }
                        }
                    ],
                    "data": {
                        "accessors": {
                            "body": "actions.GET_CONTENT_PAGE.result",
                            "stories": "actions.GET_ARTICLES.result"
                        }
                    },
                    "set": {
                        "viewport": "scroll",
                        "route": {
                            "match": "/",
                            "params": {},
                            "template": "package.core.cms/web/home",
                            "authenticated": false
                        }
                    },
                    "ui": {
                        "theme": {
                            "modelVariant": "scrollContainer",
                            "modelParams": {},
                            "designVariant": "asScrollContainer",
                            "skinVariant": "themeVariantDefault",
                            "skinTone": "dimensionVariantDefault",
                            "skinTypography": "sans",
                            "skinSpacial": "compact",
                            "skinMotion": "smooth",
                            "decorateClass": "home",
                            "ornateStyle": {}
                        }
                    }
                },
                layouts: []
            },
            blog: {...}    
        }
    },
    web: {
        documents: {
            home: {...}
        }
    }
}

The Layout Level Component

{
    layouts: [
        {
            meta: {
                "@dna": "['package.core.cms'].web.documents.home.layouts[1:DocumentLayout]",
                "@component": "['package.core.ui'].web.layouts.RenderLayout",
                "name": "documentLayout",
                "class": "RenderLayout",
                "kind": "layout"
            },
            props: {
                "set": {
                    "renderLayout": "WebPageLayout",
                    "boxCollapse": false
                },
                "ui": {
                    "theme": {
                        "decorateStyle": {
                            "display": "flex",
                            "flexDirection": "column",
                            "width": "100%",
                            "minHeight": "fit-content"
                        }
                    }
                }
            },
            regions: [
                {
                    meta: {
                        "@dna": "['package.core.cms'].web.documents.home.layouts[1:DocumentLayout].regions[1:header]",
                        "@component": "['package.core.cms'].web.blocks.WebPageHeader",
                        "name": "header",
                        "class": "Region",
                        "kind": "region"
                    },
                    props: {
                        "data": {
                            "accessors": {
                                "site": "document.site"
                            }
                        },
                        "set": {
                            "position": "center",
                            "actions": {},
                            "controls": {},
                            "layout": {
                                "display": "flex"
                            }
                        }
                    },
                    blocks: []
                }
            ]
        }
    ]
}

The Block Level Component

{
    blocks: [
        {
            meta: {
                "@dna": "['package.core.cms'].web.documents.home.layouts[1:DocumentLayout].regions[1:header].blocks[1:WebPageHeader]",
                "@component": "['package.core.cms'].web.blocks.WebPageHeader",
                "name": "WebPageHeader",
                "class": "WebPageHeader",
                "kind": "block"
            },
            props: {
                "data": {
                },
                "set": {
                },
                "ui": {
                    "theme": {
                    }
                }
            }
        }
    ]
}

The Cell Level Component

{
    cell: {
        meta: {
            "@dna": "package.core.identity.documents.home.layouts.BaseLayout.blocks.GridTable.PersonList.cell",
            "@component": "['package.core.ui'].app.cells.TextInputCell",
            "kind": "cell"
        },
        props: {
            "data": {
                "accessor": "firstName",
                "instanceType": "package.core.identity:Identity",
                "validation": "string|1|*|range|style|default"
            },
            "ui": {
                "theme": {
                    "finish": {
                        "style": {
                            "width": 100,
                            "minHeight": "fit-content"
                        }
                    }
                }
            },
            "set": {
                options: {
                    "operationMode": "basic",
                    "updateMode": "SKIP_REALISTIC",
                    "isLocalized": true,
                    "clickable": true,
                    "clickAction": ""
                },
                dependencies: [
                    {
                        "dependentOn": "name",
                        "dependencyType": "validation",
                        "dependencyResolver": "reveal",
                        "dependencyPayload": {}
                    }
                ],
                components: {
                    cell: {
                        "meta": {
                            "name": "TextInputCell"
                        },
                        "props": {
                            "data": {},
                            "ui": {},
                            "set": {
                                "dropdownDefaultOpen": true
                            }
                        }
                    },
                    elements: {
                        optionComponent: [
                        ],
                        valueComponent: [
                        ]
                    }
                }
            }
        }
    }
}

The Element Level Component

{
    elements: {
        optionComponent: [
            {
                "meta": {
                    "name": "IconElement"
                },
                "props": {
                    "data": {
                        "accessor": {
                            "selection": "customers.avatar",
                            "label": "customers.label"
                        }
                    },
                    "set": {
                        "iconType": "svg"
                    }
                }
            }
        ],
        valueComponent: [
            {
                "meta": {
                    "name": "IconElement"
                },
                "props": {
                    "data": {
                        "accessor": {
                            "selection": "customers.avatar",
                            "label": "customers.label"
                        }
                    },
                    "set": {
                        "iconType": "svg"
                    }
                }
            }
        ]
    }
}