Set display order of different elements in the journal article.

priti parmar
priti parmar
A Minute Read

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"
 
 
 
Page Comments
thumbnail
Seetesh Hindlekar
11 Years Ago
Good article Priti but will require more inputs on the implementation
Please sign in to reply.
thumbnail
Emil Öberg
11 Years Ago
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
Please sign in to reply.
thumbnail
Tuomo Kujanpää
10 Years Ago
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.
Please sign in to reply.

Related Assets...

No Results Found

More Blog Entries...