• 1. Summary
• 2. Step by Step Guide
• 2.1 Create a Screen in B1
• 2.2 Create the Template file with the HTML content
• 2.3 Use the Template in the Screen in B1
• 3. Documentation

1. Summary

Each Application can have a home Screen that is displayed when the Application is launched as the default selected option in the Sidebar. This home Screen can include HTML content with an specific B1 Object. This Use Case covers how to create the screen and what objects to add and where to place the file to add HTML content

2. Step by Step Guide

2.1 Create a Screen in B1

1. Create a new screen
2. Add a SimpleSwatHtmlContainerPanel object in the screen

2.2 Create the Template file with the HTML content

To have html content in the B1 Screen you need to create a vue Template with the next steps:

1. Duplicate an existing Template vue file of this path
Copy

/workspace/swat/src/webui/vue/src/components/templates/

2. Change the name for your desired name using PascalCase
3. Edit the content with your needs
4. Make the Template available in the file /workspace/swat/src/webui/vue/src/components/templates/index.ts by adding a new entry with your new file (same as other entries but with the correct names)

2.3 Use the Template in the Screen in B1

To use the Template you need to reference it in B1, that reference is a conversion of your file name. The PascalCase name is converted to kebab-case. Example:

If your file is HomeNewApplicationTemplate.vue the reference needed is home-new-application-template

In the SimpleSwatHtmlContainerPanel object added to your screen, the Template attribute of that object needs to have the reference as described above

3. Documentation

To find more information and all the possibilities available, you can check the following documentation.

Screen

Object Designer

Back to Use Cases

Back to Home Page