> For the complete documentation index, see [llms.txt](https://comunity.gitbook.io/learning.comunityplatform/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://comunity.gitbook.io/learning.comunityplatform/v4/toolkit-guides/screens/building-screens/navigation/lists-in-navigation-pages/dynamic-list-rendering-in-a-navigation-page.md).
# Dynamic List Rendering in a Navigation Page
Dynamic list rendering in a Navigation page enables you to show lists of data that are fetched from the Data Service dynamically with [OData](/learning.comunityplatform/v4/reference-articles/odata.md), view [Data Path](#data-path) for implementation details. [Mustache Templating](/learning.comunityplatform/v4/reference-articles/mustache-templating.md) is a valuable tool for creating complex and dynamic OData queries 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](#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.
To create a dynamic list from a active List in a Navigation page configure the properties that follow:
* Data Path
This property is used to to define the resource path of an [OData URL](https://www.odata.org/documentation/odata-version-3-0/url-conventions/).
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](https://www.odata.org/documentation/odata-version-3-0/url-conventions/).
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
* **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](broken://pages/jQeBNhDC4JySmbFQM3G2#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.
```aspnet
The syntax for the Target URL can have 0 to N parameters passed to the navigation link,
as shown below:
LINK:
LINK:?
LINK:?&
// 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](/learning.comunityplatform/v4/reference-articles/mustache-templating.md) is used to reference the dynamic value of the query parameter as shown in the last segment of the Target URL: `{{=FaultTypeId}}`.
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://comunity.gitbook.io/learning.comunityplatform/v4/toolkit-guides/screens/building-screens/navigation/lists-in-navigation-pages/dynamic-list-rendering-in-a-navigation-page.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.