The Interface Builder is a new way to create Interfaces in MetaLocator. This tool is the primary way to create store locators, searchable databases and other applications within MetaLocator.
Settings Groups
The icons on the left of the editor represent groups of settings. Position your mouse over each icon for a description of the settings contained in that group as shown below. On wider screens, the name of the group will be displayed.
Preview Modes
The right-hand side of the interface represents a preview of the Interface you are working on. You can preview the interface in mobile, tablet or desktop configurations by clicking the corresponding icon on the toolbar shown below:
Sample Data
The Sample Data control enables the display of sample data instead of the data uploaded in the account. This is useful when no data has been added to the account. It is also helpful to compare user-provided data with MetaLocator-recommended data format.
Real-time Updates
As you make canges using the toolbar and menu items on the left, notice that the updates are reflected in real time, allowing you to see the results of those changes immediately.
Important: Changes are not saved until you click Save in the upper right. If you make many changes without saving, the system will warn you.
Templates, Fields, Field Options and Containers
MetaLocator has a number of regions that our users want to customize. These include:
The search form
The list of results
The contents of the map popup window
The detail page
Modal popup windows like, "Contact" and "Share"
These regions are labeled below:
When clicking the optional details button, the Details region is shown as below:
Updating Results Templates
These and other regions are editable using the Interface Builder. To change the way results are displayed, click the Results setting group, and expand the desired region as shown below:
Expanding the List group allows us to manage the contents of the repeating list of results, commonly on the left hand side of a locator, as shown below.
Fields
Each field shown above is controlled by a option as shown below. All fields listed are enabled in the display. Each field is listed inside the container, shown in blue text. The container is the template wrapper the field is inserted into. For example, the list of buttons at the bottom of the result above are in the Links container. Containers allow you to control where your fields should appear.
Fields can be sorted by drag and drop by clicking the grey dots to the left of the field name. This controls their display order within their container. You can also drag fields into another container.
Some options might display a green icon as shown above, which indicates that a subscription upgrade is required to access that option.
Field Options
Each field shown can be expanded to show options related to that field. Positioning your mouse over the field name also highlights the field in the Interface to help visually identify the field.
The options shown for each field can be different for each field. Position your mouse over the option label to see an explanation of what that option controls.
Some common field options include
Label: The text that appears next to the chosen control. Commonly a text string that indicates what the field represents. E.g. First Name. If the field is populated it will display. Leave it empty to hide the label.
Icon: The icon displayed next to the field. These are Font Awesome classes. You can manually type class or click the folder icon to visually browse and choose an icon.
Template: This template represents the block of HTML used to output the selected field. Not all fields have these "sub" templates. The Title field has multiple options which allow it to be output as an HTML H1,H2,H3 tag and so forth. The pencil icon allows Enterprise users to specify a customized Handlebars template allowing for complete control of the markup.
Classes: This option allows you to select from a list of CSS classes which control style, position, alignment, color and other effects. You can select from the list or manually enter classes. MetaLocator uses the Bootstrap CSS framework popularized by Twitter. Any Bootstrap 4 class can be provided.
Link Text: When the field is clickable, sometimes it can be important to change the link text.
Tooltip: This option presents a hovering tooltip which can provide more details to your users before they invoke a particular feature.
For a detailed explanation of each field, including available field options, hover your mouse over the various labels. We will introduce additional reference documentation as it becomes available.
Templates
The overall layout of each region is controlled by the corresponding Template selection, as shown here:
Each item is in a template container, seen in the screenshot above as Address and Body. Each template container can be identified by positioning your mouse over the container name and observing the highlighted area as shown below:
Notice the "Body" template container is centrally positioned and in this example holds the Title, Review Summary, Street View link fields and so forth.
The template selection shown above controls the HTML used to display the selected fields. Each template has the same list of template containers, they are shown below.
Each template positions and styles the containers a bit differently based on the target use case. For example, "header" might be a very bold and large title in one template, and might be a more subtle bar in another template, but the order will always be as shown above.
Some template containers impose a style on their contents. For example, link fields placed in the Toolbar container in the Card Template are automatically styled as circle buttons shown below:
