• Has group breaks
• Break field
• Sort on break field
• Break field characters to check
• Break is case-sensitive
• Group header text lookup dictionary

Group header text lookup dictionary

Description

This property specifies an optional 'dictionary' that can translate break fields into more meaningful text.

You can view this video to see the 'Group header text lookup dictionary' in action, see its transcript, or follow the guide below:

Create a Group Header Lookup Dictionary

1. Open the UX Builder and go to the UX Controls page. In the Data Controls menu find the [List] control option. Click this to add a list control to your component.

   

2. Highlight the control. In the control's Properties list scroll down until you come to the 'List Properties' section. Click on the 'List properties' property. This will open the 'List Builder'.

   

3. In the List Builder, open the "Data Source" Tab. As the 'Data Source Type:' select 'Static'. This will open a number of properties.

   

4. Open the Static data property.

   

5. Create two fields. Separate each field using a '|'. Also make sure to include the name of each field at the top of the static data. Add one field that is numeric. Give this field the name "Code"

   City|Code
   Boston|2
   New York|1
   Chicago|2
   Los Angeles|3
   Atlanta|3
   Tokyo|1
   Niamey|2
   Rome|2
   Paris|1
   London|2
   Lima|3
   Montreal|3
   Toronto|1
   Barcelona|2

   

6. Click OK to close the Static data dialog. On the List Builder's Data Source tab find the "Server-side Group Breaks" section. Check the 'Has group breaks' property.

   

7. Click the button next to the 'Break field' property. Set the property to the 'Code' field.

   

8. Make sure 'Sort on break field' is checked

   

9. Click on the List Builder's 'List Layout' tab and add the Two static data fields you defined to the component. Use the blue '>' icon to move each field from the 'Available Fields' list into the 'Columns in List'. Click OK to close the Grid Builder.

   

10. Run the component in Live Preview. You should see the group breaks dividing based on the 'Code' field data.

    

    Group breaks based on Code field

11. Go back to the UX Control page on the Design tab. Reopen the grid builder and on the Data Source page click the button next to 'Group header text lookup dictionary' property.

    

12. The 'Group Header Lookup Dictionary' dialog will open

    

13. Enter the three numbers that were defined in the Code field as static data into the dictionary. Each entry should be on its own line.

    

14. Now assign a title to each of the entries using an '=' sign. This will be the new group break title.

    

15. Click OK and OK to close the Grid Builder. Run the component in Live Preview. You should see the new headers appear on each group break.