Created by:

michael

Date:

07/18/2020

Creating New 'Admin' Users

1. Go to Settings - Users in the main menu.
2. Click the 'add user' button at the bottom of the page.
3. Enter the new user's details.
   1. Full Name,
   2. Email,
   3. Logon Name,
   4. Security Level (Standard or Admin)
4. Configure the Users Access Rights for each part of the admin system to turn on/off the functionality/information they can access.
5. Enter and Confirm the Users Password.

Languages

The languages section (accessed from CMS - Languages) is used to configure/set up the languages the site will use. Each language should have a 2 letter language code e.g. PT, EN or DE and a name e.g. Portuguese, English, German. etc.

These settings combined with the Multilingual Settings (accessed from Multilingual - Settings) in the main menu allow the site to be translated in multiple languages.

The Multilingual settings requires a default language code and Default language name to be selected.

The Translation Maps list sould also be completed to specify the url fragments each language should use these are used after the website domain and before any page urls e.g. https://www.vidamarresorts.com/pt/resort-algarve/servicos/spa-health-club-vidamar.

The Host Override section is not required in most circumstances but allows for the default language to be set to different languages for each host, for example, you may have a website that is only used in Portuguese.

Layouts

Layouts are essentially the template of the site (or a subset of the site).

Typically there will be one layout per site, it sets up the header and footer used on all the pages and pulls in the relevant CSS and Script files that the site uses.

It's often unnecessary to update/change the layout files, but if changes are required the layout can be edited by selecting CMS - Layouts from the main menu.

This will open a list of the layouts which have been set up. Each layout listed will also show which Host it's applied to.

Clicking on each Layouts name will bring up the screen to edit the layout.

The General tab is where the layout name and host are set.

The Html tab is where the main HTML content is entered, this also includes {{handlebars}} tags which are used to pull in zones and the main {{content}} from each of the content types. CSS files and Scripts can be included within the HTML using the {{style 'stylesheet name'}} and {{script 'script name'}} tags.

The Zones tab is where zones are created/edited, each zone can have one or more "widgets" added to it. If a zone called "menu" is created it can be added to the layouts HTML using {{menu}}. Zones allow the HTML content to be segmented/organised as needed.

The Maps tab is used to configure which pages use this layout (if the layout is used on all pages within the selected host the map entry will be /* - meaning use this layout on all pages.

Content Types

Content types are used to set the template of content items (pages) on the site. They can be accessed by going to CMS > Content Types in the left panel of the admin system.

The Content Type is where you specify the HTML and parts structure, all pages created with this content type will follow this structure.

You can add as many parts as you want to each Content Type. Below is a short description of each Part and what they do:

• AuraDebugRenderer: Used to debug any errors on the page and see the structure of the parts.
• Body: Creates a WYSIWYG editor which can be edited on each page/content item.
• ContentList: Creates a list of content items e.g. a list of all blog items or client testimonials.
• ContentLoader: Similar to ContentList, this creates a list of content items. It can also be used to load an individual content item by ID/URL.
• DataCollection: Creates a collection of multiple DataFields.
• DataField: Can be used to show a string of text, number, date, or boolean field.
• DataFieldDropdown: Create a dropdown list of options to choose from.
• FormContainer: Container needed for any HTMLForms created.
• HeadTags: Used to inject any additional head tags which may be needed on the page - e.g. open graph tags.
• Html: Creates a static HTML section which is editable within the content type settings.
• HtmlForm: Adds a form to the page. You can specify which fields the form will need in the part settings. 
• Image: Adds an image upload field.
• ImageCollection: Adds multiple images upload fields.
• Indexed: Indexes the page in search (for the search part)
• PageHtml: Creates a HTML section which is editable within each individual content item.
• PageTitle: Adds a simple text field for page headings.
• SEO: Change the title, description and keywords of each content item.
• Search: Adds a search box and search results to the page.
• Text: Adds a simple plain text field.
• reCAPTCHA: Adds a reCAPTCHA field to HTMLForm's. 

The Settings tab allows you to configure each part you have added and change additional settings on the part.

The Templates tab allows you to create and edit as many Content Type templates as required. Each template is injected into the website Layout and replaces the {{{content}}} handlebars tag. Each template uses HTML code to create the required page structure - handlebars tags are used to pull content from each of the Parts added to the type and place the content entered into each part in the correct location.

The 'Map' field specifies how/where each template should be used:

• url: /*
  This is the global template for the page which will display by simply going to the page url.
• Aspect: NameGoesHere
  Aspects are used differently to normal templates - they are used to create templates for content items that will be displayed on another 'list' page via a ContentList or ContentLoader part.
  
  Aspects are used for content such as lists of testimonials, blog items when they're displayed on a listing page, and products when they're displayed on a product list page. They are used to displaying a cut-down version of a content item in a list. The template or aspect HTML is added for each item in the list.

The Server tab is used to add any additional server-side Javascript which may need to be used on this Content Type.

The Client tab is used similarly but for client-side Javascript instead.

If you add a new part this then needs to be displayed on the page. This is done using handlebar tags.

Example:

If you add a new HTML part with the name 'BodySection' you would then go to the Templates tab and add this to the HTML using: {{BodySection.html}}

Content Items

Content Items are essentially pages (and other items - e.g. testimonials) on the website - whenever you create a new Content Item you must first choose the Content Type which will determine the template and structure of the page/item. 

Existing Content Items can be accessed by going to CMS > Content Items in the left panel of the admin system.

You will see a list of existing content items, to edit each page/item simply click the 'Url' or 'Title' field, and edit the information on the page from there.

You can also click any of the links in the 'Translations' column to edit the content on the translated version. 

To add a new content item, choose which content type you would like to use from the 'Select a type to add...' dropdown menu (at the bottom of the page) then click the 'add new' button. This will create a new content item which follows the structure of the chosen Content Type. From here you can fill in all fields and your new page will instantly become visible on the frontend of the website at the specified URL when you click save.

Images

The Images folder (accessed by going to CMS - Images) is where all the images are stored within the content management system.

Images can be added by clicking on the 'add new' button at the bottom of the Images screen.

This opens the 'Add Images' screen, clicking the blue 'Select File' button will open a file browser where you can select the image you want to add from your computer.

After selecting the correct image, click 'Open' in the popup window/file browser to select the image, this will close the popup window and the image will then be displayed on the Add Images screen.

Finally, select the blue 'Upload' button to upload the image to the CMS.

The uploaded image can then be used on any content items within the website, by selecting it using the image browser, or by inserting the image url into the relevent field - the image path (the location where the image is saved is shown in on the 'Images Screen' in the 'url' column.

Scripts

The Scripts list screen (accessed via CMS - Scripts) is where all Javascript files are stored, these can be added to the layout using {{script 'script name'}} or using traditional javascript includes.

They can also be added to specific content types if the script is only used on certain pages, also using either handlebars or a traditional script include.

New scripts can be added from the Scripts list screen by clicking the add new button, then either importing a downloaded file using the 'Import file' option, or the script can be added into the script tab manually. Once all the input fields are completed as required - clicking save will add the script file to the CMS to be used.

Script dependencies can be used to pull in multiple scripts using one include/import line.

There are also options to minify and apply JSX transformation to the script (if using React).

Minified and compressed scripts are still saved in their un-minified/uncompressed state so that they can easily be updated in the CMS in the future,  the minification/compression is only applied when to the scripts being included on the website. 

Styles

The Styles list screen (accessed via CMS - Styles) is where all CSS files are stored, these can be added to the layout using {{style 'style-name'}} or using traditional CSS includes.

They can also be added to specific content types if the style is only used on certain pages, also using either handlebars or a traditional script include.

New stylesheets can be added from the Styles list screen by clicking the add new button, then either importing a downloaded file using the 'Import file' option, or the style can be added into the style tab manually. Once all the input fields are completed as required - clicking save will add the style file to the CMS to be used.

Style dependencies can be used to pull in multiple styles using 1 include/import line.

There are also options to minify and add compression to the stylesheet.

Minified and compressed stylesheets are still saved in their un-minified/uncompressed state so that they can easily be updated in the CMS in the future,  the minification/compression is only applied when to the stylesheet being included on the website. 

Media

The Media folder (accessed by going to CMS - Media) is where all the media files are stored within the content management system. This includes any files which don't fit into the Image or CSS/JS categories - PDFs, Word documents, etc.

Media can be added to the system via the CMS - Media screen by clicking on the 'add new' button at the bottom of the Media screen.

This will open the the 'Add Media' screen, clicking the blue 'Select File' button will open a file browser where you can select the media you want to add from your computer.

After selecting the correct document, click 'Open' in the popup window/file browser to select the document, this will close the popup window and the document will then be displayed on the Add Media screen.

Finally, select the blue 'Upload' button to upload the document to the CMS.

The uploaded document can then be used on any content items within the website, by inserting the document url into the relevent field - the document path (the location where the media is saved is shown in on the 'Media Screen' in the 'url' column.

Template Helpers

Template Helpers are accessed by going to the 'CMS - Template Helpers' section. Template Helpers are used to apply javascript to system data before its output in email templates or on the website. Examples of how this could be used are: formatting dates or trimming a text section. 

To use a TemplateHelper, simply add the helper name before the PartName when using handlebars tags {{HelperName PartName.text}}

Pager

The Pager screen is accessed via the main menu, under 'Settings - Pager'.

The pager settings screen is used to configure how list pages operate on the website (i.e. how lists of content are divided and navigated).

Client Forms

The Client Forms screen is accessed via the main menu under 'Settings - Client Forms'.

The Client Forms settings screen is used to configure some elements of the web forms used on the website to 'post' or submit data into the system.