Set display order of different elements in the journal article.

If content creator wants to decide during creation in which order the different elements will be displayed in the article then there should be a field like DisplayOrder which decide the position of elements in the article , By using structure and templates it is possible to achive this requirment.

Lets have a simple example of structure and template .

Structure has Content_Title , Display_Order1 ,Body &  Display_Order2 elements .

• Display_Order1  is a child element of Content_Title
• Display_Order2 is a child element of Body field. 

​Cotnent_Title and Body both are repeated fields.

Now in template read all elements and decide their positions based on its display order.

so as a result end user will able to view the content based on decided order.

Step1 : create a structure:

 <root available-locales="en_US" default-locale="en_US">

     <dynamic-element dataType="string" indexType="keyword" name="Content_Title" readOnly="false"            

                    repeatable="true" required="false" showLabel="true"  type="text" width="small">

                       <dynamic-element dataType="number" fieldNamespace="ddm" indexType="keyword"

                               name="Display_Order1" readOnly="false"                

                               repeatable="false" required="true" showLabel="true" type="ddm-number" width="small">

                                 <meta-data locale="en_US">

                                  <entry name="label"><![CDATA[Display Order]]></entry>

                                  <entry name="predefinedValue"><![CDATA[1]]></entry>

                                  <entry name="tip"><![CDATA[]]></entry>

                                  </meta-data>

                          </dynamic-element>

                           <meta-data locale="en_US">

                                <entry name="label"> <![CDATA[Content Title]]></entry>

                               <entry name="predefinedValue"> <![CDATA[]]></entry>

                                <entry name="tip"><![CDATA[]]></entry>

                             </meta-data>

             </dynamic-element>

             <dynamic-element dataType="html" fieldNamespace="ddm" indexType="keyword" name="Body"

                         readOnly="false" repeatable="true"            

                         required="true" showLabel="true" type="ddm-text-html" width="small">

                           <dynamic-element dataType="number" fieldNamespace="ddm" indexType="keyword" n              

                                      name="Display_Order2" readOnly="false"          

                                      repeatable="false" required="false" showLabel="true" type="ddm-number" width="small">

                                      <meta-data locale="en_US">

                                           <entry name="label"><![CDATA[Display Order]]></entry>

                                           <entry name="predefinedValue"><![CDATA[2]]></entry>

                                           <entry name="tip"><![CDATA[]]></entry>

                                      </meta-data>

                             </dynamic-element>

                           <meta-data locale="en_US">

                            <entry name="label"><![CDATA[Body]]></entry>

                            <entry name="predefinedValue"><![CDATA[]]></entry>

                            <entry name="tip"><![CDATA[]]></entry>

                            </meta-data>

              </dynamic-element>

</root>

 

 

Step 2: create template

    " #set($displayItems = [])

      #if (!$Content_Title.getSiblings().isEmpty())

              #foreach($cur_Content_Title in $Content_Title.getSiblings())

                            #set($void = $displayItems.add({"sortOrder" : $cur_Content_Title.Display_Order1.getData(), 

                                   "itemField" : $cur_Content_Title.getData() }))

              #end

      #end

      #if (!$Body.getSiblings().isEmpty())

              #foreach ($cur_Body in $Body.getSiblings())

                             #set($void = $displayItems.add({"sortOrder" : $cur_Body.Display_Order2.getData(), 

                                    "itemField" : $cur_Body.getData()}))

               #end

      #end

      #set($size=$displayItems.size())

      #foreach($obj in $displayItems)

             #if($obj.sortOrder)

                 #if($getterUtil.getNumber($obj.sortOrder) > $size)

                      #set($size=$getterUtil.getNumber($obj.sortOrder))

                  #end 

             #end

      #end 

      #foreach ($number in [1..$size])

             #foreach($items in $displayItems)

                 #if($items.sortOrder == $number)

                      <div>$items.itemField</div>

                   #end

            #end

      #end"

 

 

 

[Seetesh Hindlekar]

Good article Priti but will require more inputs on the implementation

[Emil Öberg]

I spoke with a couple of Liferay engineers, at DevCon a couple of weeks ago, about us not being able to reorder repeatable fields in Liferay. Hopefully this will be in core in the future.

Needing the functionality I've solved it by adding a couple of lines of Javascript. Here's a hook which will add up/down-buttons to let the editor reorder repeatable fields.

Feel free to use anyway you want:
https://github.com/emiloberg/Liferay-Repeatable-Fields-Reorder-Hook

[priti parmar]

Thank you for sharing Emil

[Punam Shah]

Good Article

[Tuomo Kujanpää]

Hi!

Liferay 6.2.3 GA4 seems to be working if you replace in edit_article.js:

2: var fieldsDisplaySelector = '#_15__fieldsDisplay';
with
2: var fieldsDisplaySelector = '#_15_ihgq_null_null_fieldsDisplay';

Note: The name of the latter id seems to generated per stucture but is not.

This feature should be implemented to Liferay.