Hybris Backoffice. How to Align attributes underneath each other?

Question

What is the best way to align attributes undernith each other inside an editor area's section in hybris backoffice?

If I have something like:

            <section name="hmc.section.1.1" >

                    <attribute qualifier="a" />
                    <attribute qualifier="b" />
                    <attribute qualifier="c" />
                    <attribute qualifier="d"/>
                    <attribute qualifier="e" label="" />
                    <attribute qualifier="f"/>
                    <attribute qualifier="g" label=""/>

            </section>

I will end up having them aligned like this:

a,b,c,d,
e,f,g

What is the best approach to align them like this:

a,
b,
c,
d,
f,
g

score 0 · Answer 1 · answered May 15 '20 at 09:58

Have a look in the default backoffice configuration file. xxx-backoffice-config.xml. Here is one example in it:

<context type="Industry" merge-by="type" component="editor-area">
    <editorArea:editorArea>
        <editorArea:essentials>
            <editorArea:essentialSection name="hmc.essential">
                <editorArea:attribute qualifier="industryGroup" />
                <editorArea:attribute qualifier="code" />
                <editorArea:attribute qualifier="name" />
            </editorArea:essentialSection>
        </editorArea:essentials>
        <editorArea:customTab name="asd">
            <editorArea:section name="asdf">
                <editorArea:panel name="asdf">
                    <editorArea:attribute qualifier="asd">
                        <editorArea:editor-parameter>
                            <editorArea:name></editorArea:name>
                            <editorArea:value></editorArea:value>
                        </editorArea:editor-parameter>
                    </editorArea:attribute>
                </editorArea:panel>
            </editorArea:section>
        </editorArea:customTab>
    </editorArea:editorArea>
</context>

I am quite sure you can define it with the editorArea: stuff. Here is what the xsd says:

<xs:complexType name="section">
    <xs:complexContent>
        <xs:extension base="abstractSection">
            <xs:sequence>
                <xs:choice minOccurs="0" maxOccurs="unbounded">
                    <xs:element name="customPanel" type="customPanel"/>
                    <xs:element name="panel" type="panel"/>
                </xs:choice>
                <xs:choice minOccurs="0" maxOccurs="unbounded">
                    <xs:element name="attribute" type="attribute" minOccurs="0" maxOccurs="unbounded"/>
                    <xs:element name="custom" type="customElement" minOccurs="0" maxOccurs="unbounded">
                        <xs:annotation>
                            <xs:documentation>Allows to insert custom html into section. Html code may contain
                                SpEL expressions regarding edited object - SpEL expressions need to be in braces
                                {}
                            </xs:documentation>
                        </xs:annotation>
                    </xs:element>
                </xs:choice>
            </xs:sequence>
            <xs:attribute name="columns" type="xs:decimal" use="optional" default="2"/>
        </xs:extension>
    </xs:complexContent>
</xs:complexType>

I tried your eample with editorArea:panel. BUt for some reason it doesn't fit the backoffice layout, a small part of the attributes on the left get cutted, and the width seems to be 100%, so the input get from extreme left to the extreme right of the screen. I tried to use some panel parameter to adjust layout but it always get broken, I am still trying to fgure this out. — Ricardo Machado, May 18 '20 at 08:10

Hybris Backoffice. How to Align attributes underneath each other?

1 Answers1