Dynamic navigation which is populated with post articles.
This article explains how to create dynamic navigation which is automatically populated by post articles. This can be useful for creating small sidebar menus of recent posts, or footer navigation which lists post article titles.
The navigation will be populated with the titles of all post articles of a certain post category. The <data:repeater> will be used
to retrieve the post articles, with the data source being set to a call to the Oncord API.
The <data:repeater> is similar to a for loop which will repeat everything inside the tag until there are no more items left to
return from a data source.
The data repeater specified above uses the following attributes, for a list of all attributes please see the API here.
as="post" - This attribute determines the name of the variable to be registered for the repeating element. In this case the variable has been given the name "post" and is therefore referenced as $post.
datalimit="4" - This attribute defines the maximum number of rows the data repeater will return. In this case it was decided that there needed to be a maximum of four articles displayed.
datasource="\Components\Website\Posts::getAllForCategory(1)" - This attribute defines the data source of the repeater. In this example all articles where the category id=1 will be returned. To find a post category id navigate to the post categories page of the dashboard, then click a category to open the category edit page. On this page there is a tab labelled "Developer Info", which lists the post category ID.
When loading a large amount of data, instead of increasing page load time you can opt to display a "Show More" button.
Pagination is a technique used to assist in loading and displaying a large amount of data. The best known example of pagination is used on Google:
As of March 2016, Oncord no longer supports pagination. Instead, a "Show More" button is displayed which reveals more content:
Click here to view the media release for the positives of this approach.
To implement this feature, you can simply add the attribute paging="true" to a <data:repeater> tag, and pagingrows="5"
to control the number of elements to display before displaying the "Show More" button.
The following code is used to display a list of Posts associated with a Post Category:
Introduce the Show More button by adding the attributes paging="true" and pagingrows="5" to the <data:repeater> tag as shown below:
The data repeater specified above uses the following attributes, for a list of all attributes please see the API here;
as="post" - This attribute determines the name of the variable to be registered for the repeating element. In this case the variable has been given the name "post" and is therefore referenced as $post.
datalimit="4" - This attribute defines the maximum number of rows the data repeater will return. In this case it was decided that there was no need to have a maximum number of posts, so it was left out.
datasource="\Components\Website\Posts::getAllForCategory(1)" - This attribute defines the data source of the repeater. In this example all articles where the post category id=1 will be returned. To find a post category id, navigate to the post categories page of the dashboard, and then click a category to open the category edit page. On this page there is a tab labelled "Developer Info", which lists the post category ID.
paging="true" - This attribute enables the "Show More" paging feature.
pagingrows="5" - This attribute defines the number of rows to display before displaying the "Show More" button.
Oncord's UI Controls API includes a pre-built rotator, which helps reduce development time, while providing users with an
improved experience updating content via the visual editor.
Some notable features of the Oncord rotator:
You can add a rotator to a website page or design through use of the <layout:rotator> UI Control.
Alternatively, a rotator can be added to the page via the visual editor. Click "Insert" on the left-hand side of the screen while editing a website page, and drag-and-drop a "Rotator" element into position on the page.
In order to take advantage of all the features and possibilities of the rotator UI control, take note of all the "Attributes" available in the API reference here.
The <layout:rotator> control can handle any standard content. Each direct child of the rotator will be turned into its own slide.
The rotator includes standard next / previous controls, however you can alternatively add custom links instead.
Place your custom navigation elements within links that are assigned with unique IDs.
Add the attributes moveNextId and movePreviousId to the <layout:rotator> control, where the IDs that you provide correlate to the IDs used by your next / previous buttons.
Set the attributes arrowVariant="none" minimapVariant="none", to remove Oncord's default rotator navigation elements.
How to call functions in Server Code from the data repeater.
HTML:
PHP:
You can link the data repeater to components within the system to iterate over data. Refer to the documentation of the component for function calls and field names.
HTML:
You can always output the data contained in the registered variable by using varDump().
HTML:
Allows you to show from a record, to a record. Behaves like the LIMIT clause in SQL.
HTML:
Allows you to specify conditions in your query. Behaves like the WHERE clause in SQL.
HTML:
Allows you to specify conditions in your query. Behaves like the ORDER clause in SQL.
HTML:
The getDataCount() method returns the number of data items in the Repeater's dataset. This example demonstrates how to use getDataCount() to conditionally show a repeater when it has 1 or more results. This can be used as a more flexible alternative to the EmptyMessage attribute as it can be used to target any number of results.
HTML: