You can automatically create content articles on instances based on their type definition, and have links to the articles auto-created on the instance Overview tab.
Articles are a great way to store and share information about your processes including information that is not always easy to share, such as PID diagrams, HMI screens, plant layouts, equipment locations, and more.
The CMS provides a content editor that is easy to use and is accessible for front-end editing. Articles can have tables of content, galleries of images, and they are easy to link to from other content in the platform.
The instance(s) you auto-create articles for must derive from a type and the type must have a display script on it.
How to create a Display Script that generates a CMS article
- In Model Explorer, open the Types tab and navigate to the type you want to create the article for.
- You cannot edit a type in the ThinkIQ Base Library; if necessary, create a sub-type by clicking the plus button to Create New Type (Derived from: type you have selected.) Complete the dialog and Save.
- On the type, open the Scripts tab and add a script using the plus button at top right of container.
- Give the script a name
- Description is optional
- Choose php as the Language
- Select Display Script as the Run Mode
- Select Blank Script for Template
- Click Create button
- On the scripts tab, open the IDE by clicking on the monitor icon for the new script.
- Insert the following code snippet:
<?php // This script uses 'smart_equipment.utility_classes.cms_article_class' to retrieve a CMS article and display it // if the article does not exist, it will create it with some default text use TiqUtilities\Model\Script; require_once 'thinkiq_context.php'; $context = new Context(); Script::includeScript('smart_equipment.utility_classes.cms_article_class'); $article = new Article_manager($context); echo($article->get_content()); - Save the script.
- In Model Explorer on the Instances tab, create a new instance of your new type.
- Be sure to select your type and not its parent.
- In the Overview tab of your new instance, at the right of the container, you will see the 'your type name' Overview link. Click the link to create the new article.
- Use the browser refresh button to refresh the page, then open the Editor using the gear icon at the top right of the page.
Editing the Article
CMS Editor: Create Tabs or Accordion Containers
Using Tabs or Accordions is pretty simple and straightforward. You just place 'tab' or 'accordion' tags around the text (rich content) that should show up in tabs or accordions.
You don't need to go into HTML view, you can use this right in your WYSIWYG editor.
Every block of content should be preceded by a starting tab, or accordion tag, like this:
{tab title="Title of the tab"}
Place a closing tag surrounded by {} after the last content block. The closing tag needs to be plural, e.g. {/tags} or {/accordions}.
A simple tab set with three tabs would look like this:
{tab title="Tab 1"} Lorem ipsum dolor sit amet, consectetuer adipiscing elit. {tab title="Tab 2"} Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. {tab title="Tab 3"} Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. {/tabs}
A simple accordion set with three accordions would look like this:
{accordion title="First Tab"} Lorem ipsum dolor sit amet, consectetuer adipiscing elit. {accordion title="Second Tab"} Aenean commodo ligula eget dolor. Aenean massa. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. {accordion title="Third Tab"} Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. {/accordions}
CMS Editor: Create Index/Table of Contents
The most direct way to add an index to an article is to add the tag {index} at the top of your document. Put the tag on it's own line. The index tag will be replaced with a table of contents. This table of contents will contain links to the different headings in your content.
You will need to use the heading tags (<h1> to <h6>) in your content to tell the Index what the headings are.
CMS Editor: Create Columns
User the column button on the toolbar to insert columns. The Layout dropdown helps to create easy column widths.
The class dropdown can also help to create more interesting column layouts and styling.
CMS Editor: Insert Images
Use the Insert image button to insert images. The Image Manager allows you to search folders for existing images, create folders for images and upload new images. When you upload images, you are offered a Resize option: try to upload the image at its original size for best results. Images can be resized inside the article, even if they are uploaded at full size.
You can also use the Popups tab in the Image Manager to display an image at full resolution. You will need to select the image in the URL field from the folder\files system. Add a Caption and/or Title and set the Dimensions you want the popup image to be.
CMS Editor: Insert PDF Document
How to insert pdf documents into an article
- Open target article/webpage from the editor gear (front end of platform)
- Place your cursor at the place in the article where you want the pdf inserted.
- Click on the 'Insert file' icon in the toolbar:
- Using the folder structure at the bottom right, navigate to your document. You can also create a new folder, or navigate to a folder where you want to store your pdf, and Upload the pdf using the Upload icon.
- Once you have located or uploaded your file, click on the pdf file name in the center bottom pane and see that the URL is filled in on the File tab at the top of the dialog.
- Switch the Format from Link to Embed.
- Set the dimensions for displaying the document, if desired.
- Adjust alignment and Margins, if desired.
- The document may not render in the Editor, but after Saving, check the front end of the site to see the result.