Using Oro layouts

Presentation title here

Using Layouts


Layouts

In this presentation● Block Types● Layout Builder● Block Themes● Context● Controllers and Context Configurators● Data and Data Providers● Theme specific configurations and assets


Layouts

What is layout?● Layout defines the visual structure of the UI● Layout is the tree hierarchy of page blocks● Layout tree shouldn’t depend on data


LayoutsTree structure❏ root

❏ header❏ body

❏ sidebar❏ main content

❏ footer

Each of these blocks have children in the final structure


Layout ComponentProvides tools for defining layout elements,managing structure and themes


Layout Component

Block❏ id❏ parent id❏ block type❏ options

Block Types● Container - have children● Final Block - doesn’t have children


Layout ComponentDefault block types:● root <html>● head <head>● title <title>● meta <meta>● style <style>● script <script>● body <body>● form <form>

● fieldset <fieldset>● link <a>● list <ul>● ordered_list <ol>● text simple text● input <input>● etc.


BlockTypeInterfaceBlock types implements BlockTypeInterface


Block Type example


DIBlock types should be registered in container


DIBlock types can be defined in DI only


Layout Tree❏ Difines block structure of the page❏ Can be build using LayoutBuilder


LayoutBuilderInterface


LayoutBuilderBuild tree using Layout Builder

Tree:❏ root

❏ header❏ body

❏ sidebar❏ main content

❏ footer


LayoutBuilderWe can use Yaml to configure LayoutBuilder

PHP: Yaml:


LayoutBuilderWe can use Yaml to configure LayoutBuilder

Yaml: Yaml (alternate syntax):


Update tree

We can update tree using a lot of actions from different places

❏ add❏ remove❏ move

❏ addAlias❏ removeAlias

❏ setOption❏ appendOption❏ substractOption❏ replaceOption❏ removeOption

❏ addTree


Update example


Theming


ThemingTwig templatesfor blocks:


ThemingTwig blocks naming conventions

Block type template name:❏ {block_type_name}_widget❏ For text block type - text_widget

Block template name:❏ _{block_id}_widget❏ For page_title block - _page_title_widget


ThemingTo apply templates to layout blocks use actions:

@setBlockTheme: themes: “theme.html.twig”


Theming

Tree of blocks + Twig template = HTML


Glossary❏ Block

❏ contains id, type, parent id and options❏ Block Type

❏ block, container etc.❏ Layout Update

❏ php or yml, uses LayoutBuilder to build tree

❏ Actions❏ @add, @move, @remove,

@setBlockThemes etc.


Layout BundleIntegrate Layout with Symfony


Layout themes placement❏ DemoBundle

❏ Resources❏ views

❏ layouts❏ theme_name❏ second_theme_name


ContextIdentify page layout


Same Context = Same Tree Structure


In Context we have❏ Theme name❏ Route name❏ etc.

We can pass extra vars to Context from Controller


@Layout controller example


ContextWe gather layout updates (aka YAML files)based on Context vars


Context❏ DemoBundle


❏ layouts❏ theme_name

❏ update1.yml❏ update2.yml❏ update2.yml

Context::theme





❏ ...❏ route_name

❏ update1.yml❏ update2.yml

Context::route_name





❏ ...❏ route_name

❏ widget_container❏ update1.yml

Context::widget_container


Context conditionsWe can execute specific updates based on context using layout update conditions


Conditions example


Extending ContextWe can add vars to context globally using

ContextConfigurators❏ global❏ controller independent


Context Configurator example


DI Di tags for context configurators example


Use Context in Layout updatesWe can use Context vars in layout updates


Use Context in Layout updatesWe can use Context vars in layout updates

But title is the data


Layout BundleStructure can't rely on data - basic principle

We need something new


Data


Data


DataHow can I pass data from Controller?


DataHow can I pass data from Controller?

context[“data”][“title”]|_____ ______|

\/ shortcut


DataU can’t use context[“data”] in layout updatesbecause Layout tree can't depend on data(basic principle)

Use data instead


Dataconditions affects tree, block options - no (even visible option)


Dataconditions affects tree, block options - no (even visible option)

so context accessible in conditions and options, but data accessible only in options


DataOk, I can pass data from Controller, but I have request independent data

For example Category list


Data Providers


DataProviderInterface DataProviderInterface


AbstractServerRenderDataProvider


DataProvider example


DI


Name conventionsAll layout related classes should be placed in Layout directory (similar to Forms), for example:

❏ data provider❏ in Layout/DataProvider directory:

Layout/DataProvider/MyCustomProvider.php ❏ block type

❏ in Layout/Block/Type directory: Layout/Block/Type/MyCustomType.php❏ context configurator

❏ in Layout/ContextConfigurator/ directory: Layout/ContextConfigurator/MyCustomContextConfigurator.php

❏ block extensions ❏ in Layout/Block/Extension/ directory:

Layout/Block/Extension/MyCustomBlockExtension.php


Theme metadatatheme.yml


Theme metadata❏ DemoBundle



❏ theme.yml


Theme specific configsCan be stored in theme.yml and in separate files

❏ Imagine config❏ Assetic config❏ RequireJS config❏ Datagrid.yml - in progress❏ etc.


LinksLayoutBundle documentation

● https://github.com/laboro/dev/tree/master/package/platform/src/Oro/Bundle/LayoutBundle/Resources/doc

Layout component documentation● https://github.

com/laboro/dev/blob/master/package/platform/src/Oro/Component/Layout/README.mdWorking with Forms

● https://github.com/laboro/dev/blob/master/package/platform/src/Oro/Bundle/LayoutBundle/Resources/doc/example.md#working-with-forms

Iteration over data● https://github.

com/laboro/dev/blob/master/package/platform/src/Oro/Bundle/LayoutBundle/Resources/doc/example.md#iteration-over-data

https://github.com/laboro/dev/tree/master/package/platform/src/Oro/Bundle/LayoutBundle/Resources/doc



https://github.com/laboro/dev/blob/master/package/platform/src/Oro/Component/Layout/README.md



https://github.com/laboro/dev/blob/master/package/platform/src/Oro/Bundle/LayoutBundle/Resources/doc/example.md#working-with-forms




https://github.com/laboro/dev/blob/master/package/platform/src/Oro/Bundle/LayoutBundle/Resources/doc/example.md#iteration-over-data





?

Engineering

Using Oro layouts