Support Center
HTML Components
Saber can render dynamic HTML content onto your web pages when you provide a mustache component tag. For example, the List component will render a list of content using a partial view: {{list partial:"partials/product.html"}}
List
The list component is one of the most versatile components in Saber. This component will generate HTML based on the Partial View(s) you wish to render as list items. Saber will use a Data Source to replace the mustache variables found within your partial view with data provided by the data source.
After filling out the form used to generate the mustache code for your list (shown in the screenshot to your right), open the Page Content tab to either select a data source for your list or start manually adding list items to your list.
You can use this component to create photo galleries, carousels, slideshows, product lists, menu systems & other UI elements, spreadsheets, or rows and columns of any type of information that you need to display. The possibilities are endless with the List component.
Container View
The optional container view is used to wrap HTML around list items. This makes it possible for you to create a list with extra content along with paging buttons. This could be used for creating a photo gallery that displays a large photo with a list of small thumbnails, or a carousel with back & next buttons, or a spreadsheet table with a header row for example. The possibilities are endless!
The container view can use the following mustache variables & blocks to extend the functionality of your list:
Definitions of mustache variables & blocks used within the container view:
| {{list}} | Renders the List contents within the container. |
| {{item-buttons}} | Renders one {{item-button-template}} block for each item on the current page in the List. |
| {{page-buttons}} | Renders one {{page-button-template}} block for each page of items in the List. The maximum number of page buttons displayed is defined within your List settings, as well as the total amount of list items displayed per page. |
| {{back-url}} | The relative URL used to navigate the user to the previous page of list items. If the current page number is 1, the relative URL will be an empty string. |
| {{back-number}} | The page number previous to the current page number. If the current page number is 1, then the previous page number will be an empty string. |
| {{back-disabled}} | A block that will be displayed if the current page number is 1, and should be used to disable the back button. |
| {{next-url}} | The relative URL used to navigate the user to the next page of list items. If the current page number is equivalent to the number of total pages in the list, the relative URL will be an empty string. |
| {{next-number}} | The page number next to the current page number. If the current page number is equivalent to the number of total pages in the list, then the next page number will be an empty string. |
| {{next-disabled}} | A block that will be displayed if the current page number is equivalent to the number of total pages in the list, and should be used to disable the next button. |
Definitions of mustache variables & blocks used within the {{item-button-template}} block:
| {{item-number}} | Displays a sequence of numbers, one for each item in the current page of List items. |
| {{item-label}} | Displays the value of the List item's key column. |
| {{selected}} | A block that is displayed on the first item when the web page loads. You'll have to set up click events for your item buttons to select other items when the user interacts with your list. |
Definitions of mustache variables & blocks used within the {{page-button-template}} block:
| {{page-number}} | Displays a sequence of numbers, one for each page in the list of page buttons, representing the page number that the user can navigate to. |
| {{page-url}} | The relative URL used to navigate the user to the specific page they clicked on. |
| {{selected}} | A block that is displayed on the page button that represents the current page that the user is viewing within the List. |
Partial View Component
If you'd like to add a Partial View to your page, use this component to generate the mustache code. You provide an ID for the mustache partial and select which Partial View you'd like to render, then click the button labeled "Create Partial View" to generate the mustache partial wherever your cursor is at within the code editor.
Special Variable Component
This component will allow you to generate a mustache variable or mustache block by giving you a list of special variables to choose from that will render special content onto your page.
| Current Year | {{year}} | Display the current year (typically used for copyright notices) |
| Language List Form | {{language-options}} | Will generate a language selection dropdown list for your users to select which language they would like to view your multilingual content in. |
| Page Content Title | {{# My Title}} | Display a heading element & line break within the Page Content tab to separate groups of content fields. This mustache code will not render any content on your HTML web page. |
| Page ID | {{page-id}} | Will generate a unique ID for the page you are viewing. This is useful for situations where you need to identify the page, such as a 3rd-party JavaScript library that displays a list of comments based on the page you are viewing, or a a 3rd-party JavaScript library for tracking page analytics. |
| Page URL | {{page-url}} | Will generate the absolute URL of the current page you are viewing. |
| User ID | {{userid}} | Will generate the ID of the user that is currently logged into your Saber website. You should only use this variable within a User Logged In block. |
| User Logged In (block) | {{user}} {{/user}} | Will generate a mustache block that will only render the contents of the block if the user is logged into their Saber account. |
| User Name | {{username}} | Will generate the name of the user that is currently logged into your Saber website. You should only use this variable within a User Logged In block. |
| User Not Logged In (block) | {{no-user}} {{/no-user}} | Will generate a mustache block that will only render the contents of the block if the user is not currently logged into their Saber account. |
| User Signup Allowed (block) |
{{signup-allowed}} {{/signup-allowed}}
{{signup-restricted}} {{/signup-restricted}}
|
Will generate two mustache blocks, one that will only render the contents of the block if the user is allowed to sign up, and the other will render the contents of the block if the user is restricted from signing up. |