DeveloperTutorials for Web Developers & DesignersGet 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 <standard:image> UI Control below improves upon the standard html <img> tag, adding functionality such as cropping and thumbnail generation. 

<standard:image src="/image1.jpg" width="728" maintainaspect="true" />

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

Standard HTML attributes such as width, height, class and ID can be used with UI Controls.

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:

<ul id="menu"> <li class="current_page"><a href="/">Home</a></li> <li><a href="/our-clients/">Our Clients</a></li> <li><a href="/about-us/">About Us</a></li> <li><a href="/careers/">Careers</a></li> <li><a href="/contact/">Contact Us</a></li> </ul>

A Primary Navigation UI Control can be used to produce the above list dynamically:

<navigation:primary id="menu" includestyles="false" autopopulatelevel="1" includeparentpagelevel="1" />

The UI Control's attributes are used to control which pages should be included in the nav menu, and whether some default CSS styling should be applied.

Retrieving Data with UI Controls

The <logic:variable> UI control offers a good example to illustrate how to retrieve and display data throughout website pages. This UI 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:

<logic:variable as="page" value="[? \Components\Website\Pages::get('/') ?]" />

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/').

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:

<logic:variable as="page" value="[? \Components\Website\Pages::get('/') ?]" /> <h1>[? $page['page_title'] ?]</h1>

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

Fields & API Methods

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

<logic:variable as="post" value="[? \Components\Website\Posts::get(1) ?]" /> <h1>[? $post['post_title'] ?]</h1>

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: 


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:

<logic:variable as="post" value="[? \Components\Website\Posts::get(1) ?]" /> <h1>[? $post['post_title'] ?]</h1> [? $post['post_content_short'] ?]

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

<logic:variable as="post" value="[? \Components\Website\Posts::get(1) ?]" /> [? varDump($post); ?]

Next Steps:

- Learn about Logic & Loops