Templating & UI Controls

DeveloperTutorialsGetting Started

User Interface Controls

Oncord features a library of User Interface Controls for adding dynamic elements to your pages, such as forms, galleries and navigation menus. UI controls are an extension of the standard HTML element library.

As an example, the UI Control below extends the standard html <img> tag, adding functionality such as cropping and thumbnail generation. 

Where HTML elements have attributes for providing additional information, UI Controls also have a set of attributes for controlling how elements behave and display data (such as maintainaspect in the above example).

You can use standard HTML attributes with UI controls, such as width, height and class.

To view a full list of UI Controls and all their available attributes, visit the Controls API Reference.

An Example: Website Navigation

When administrators create, re-name or delete website pages, those changes usually need to be reflected in the website navigation menu.

A "Primary Navigation" UI Control can be used to dynamically populate the menu based on the Page structure of the website. 

Instead of coding a static html list like this:

A Primary Navigation UI Control can be used to produce a dynamic list of Pages:

The UI Control's attributes are used to control which pages should be included, and whether Oncord's default CSS styling should be applied.

Retrieving Data with UI Controls

The <ss:logic:variable> UI control offers a good example to illustrate how to retrieve and display data throughout website pages. This control sets a new variable to be used throughout the document.

The "as" attribute defines the name of the variable, and the "value" attribute defines a data source (usually an API call to retrieve a Page, Product, Contact etc).

Try This Now: Edit a website page, click the SRC button, and paste the following code:

This creates a new variable called $page. The value is set to an API call, which will return an array of fields describing the home page (title, SEO description, whether the page is hidden in navigation etc).

To change which page is retrieved, change the page address defined in the value attribute (ie. change  '/' to '/about-us/').

If you save and view the page, you'll notice this UI control doesn't actually render any data on the page, it only sets a variable for use in your document.

Some additional code is needed to render the variable on the page (more below).

Templating Syntax

Oncord uses a simple templating syntax to add dynamic content to a page.

An expression can be placed anywhere in the document, starting with [? and ending with ?]

You can use this approach to render the fields from the $page variable set in the example above:

Important: This syntax is used when displaying data on the page, as well as inside the value attribute, in order to parse / execute the expression.

Fields & API Methods

The above example can be easily modified to display a Post, instead of a Page:

The Oncord PHP API provides a library of methods that can be used to return or manipulate data. The PHP API is logically sorted by Oncord Components: 

\Components\Website\Posts

Click here to view the PHP API reference for Posts.

In the API reference for Posts, you'll see a list of methods that can be used to retrieve or manipulate data (such as get, getAll, getAllForCategory).

Below that list of methods, you'll find a list of relevant database fields.

In the list of fields associated with Posts, you'll find "post_content_short", which is the Post Short Description field. 

Here's how the above example could be modified to add the Post Short Description field:

The function varDump($variable) can also be used to render all data associated with a variable, which can be useful troubleshooting issues: