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.
The Oncord UI Controls API includes a pre-built rotator to help reduce development time.
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.
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.
To add next / previous buttons to the rotator, 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.
You can also add a slide selector element, which appears as a series of "dots", allowing the user to see the number of rotator items and quickly navigate between them. To do this, add the attribute classcontrols to the <layout:rotator> control.
Within the classcontrols attributes, some standard classes are available to help position the elements. Simply insert the desired classes:
You can define your own custom classes if you wish. As an example, you could add the class "mycustom", which would then be defined in CSS as "layoutRotatorControls.mycustom".
Here's a quick rotator example.
How long, how long will I slide?
To finish this tutorial, the example below adds some text elements, buttons, and some additional CSS styles to position text appropriately
within the rotator.
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: