Dynamic List Rendering in Navigation pages

Dynamic list rendering in a Navigation page enables you to show lists of data that are fetched from the Data Service dynamically with OData, view Data Path for implementation details. Mustache Templating is a valuable tool for creating complex and dynamic ODataqueries and can also be used to pass data to child pages, such as the unique identifier of a list item, by templating the Target URL property. Dynamic Lists can be displayed in a variety of layouts, such as pies, tables, and grids.

Examples:

• You could use dynamic list rendering to show a list of products from the Data Service, filtered by category.

• You could use dynamic list rendering to show a list of blog posts from the Data Service, sorted by date.

• You could use dynamic list rendering to show a list of users from the Data Service, grouped by country.

Implementing Dynamic Lists

To implement dynamic list rendering in Navigation screens, the following properties are essential:

Data Path

This property is used to to define the resource path of an OData URL.

When using dynamic list rendering, it is important to make sure that the response payload from the Data Path is a collection. If an individual entity is returned, the application will break.

Query

This property is used to to define the query options of an OData URL.

The ComUnity Development Toolkit appends the Data Path and Query values to the system defined service root path under the hood to form a complete OData URL.

Item Title

This property is used to define a dynamic title of the list item. The Item Title is an optional property, if you do not define it by default the system will use the List Title Template.

//An example of an item title
{{=Title}}

Item Detail

This property is used to define a dynamic list item details. The Item Detail is an optional property, if you do not define it by default the system will use the List Detail Template.

The Item Detail field also accepts Markdown content.

An example of an item description
{{=Description}}

Item Aside

This property is used to specify content that is placed in the top right corner of the list box. Suitable properties include Created and a derived property called CreatedTimeAgo which is available by default in all entities.

// An example of templating of the created at property as an item aside
{{=Created}}

// An example of templating of the created time ago devived property as an item aside
{{=CreatedTimeAgo}}

Max Items

This Max Items property is used to specify limit of the records to display on the clients.

Stale After(seconds)

To improve performance the system supports caching for all read operations. The Stale After property allows you to specify the number of seconds the cached data is persisted in cache memory in the current session.

Caching is only supported for OData URL without the query options parameter.

Search Fields

This property allows you to specify entity properties to be used for filtering the dynamic list. It accepts a comma delimited string of entity properties:

Property1,Property2,Navigation_Property

// An example of a Search Field associated with a list fetched from the Fault Entity
Description,FaultSubType

Do not add spaces in your Search Fields values, valid properties are only comma delimited.

Navigation properties or entity associations are valid values of the Search Fields list property. They allow application users to filter your dynamic list by navigation property or association type. Navigation properties or entity associations are valid values of the Search Fields list property. They allow application users to filter your dynamic list by navigation property or association type. The Diagram A below show a screenshot of a typical Search Field as it is displayed in the web client during development, when a user clicks the Navigation Property Dropdown Icon, Navigation Properties appear as shown in Diagram B, application users are able to filter dynamic list by selecting a specific navigation property type from a dropdown of navigation property types. Diagram A

Diagram B

Screenshot B

Icon

Icon property will show an Icon to the left of the Title / Description.

Image URL

This property is used to define a dynamic list image. Image URL will show an image to the left of the Title / Description.

// An example of the value of Image URL
{{=Photo}}

Target URL

When you Create a Navigation Link from a dynamic list to a destination page(navigation or form page), the destination page not reachable unless you specify a Target URL.

The Target URL property allows you to specify a dynamic LINK from each individual list item in the current navigation page to the destination page. The query parameter in the LINK definition is typically an ID of an individual entity.

The syntax for the Target URL can have 0 to N parameters passed to the navigation link,
as shown below: 
LINK:<link id>
LINK:<link id>?<key=value>
LINK:<link id>?<key=value>&<key=value>

// An  example of a Target URL
LINK:FaultAddPage?faultType={{= FaultTypeId }}

Additional Notes:

• The keyword LINK is required.

• FaultAddPage is a system generated identifier of your destination page(typically this is a form page), that is listed in the Properties Editor when a page is active. The screenshot below an example of a form page identifier labelled A:

  

• faultType is query parameter.

• Mustache templating is used to reference the dynamic value of the query parameter as shown in the last segment of the Target URL: {{=FaultTypeId}}.