• 1. Description
• Templates
• How to use it
• 1. Creation of the object
• 2. Creation of the Template
• 3. Reload and Launch
• Use Cases

1. Description

Card views are created in Build.one using the SwatDataView object. The card view control looks like an explorer view displaying multiple records as tiles:

Templates

The design of the cards can be changed by creating new templates. This templates are created in Vue and the composition of the data, the styles and the behaviour are customisable. With Build.One a set of generic templates is provided, so you don’t need to create a new one if one of this satisfies your needs. The available templates are the next ones.

• card-small

• card-background-small

• card-big

• card-background-big

• card-square

How to use it

1. Creation of the object

1. Create a screen with a panel.
2. Add the following objects:
1. Correspoding DSO
2. SimpleSwatDataview
3. Link the objects in the following order:
1. ThisObject to DSO(Type PrimarySDO)
2. DSO to Dataview (Type Data)
4. Select the SimpleSwatDataview and change the following attributes:
1. TemplateFormat → vue
2. Template → yourtemplatename Name (without file extension .vue) of the Vue template in Gitpod (see step 6 to create a template)

You can use one of the existing templates that are described before here
3. TemplateOptions → 'fad fa-3x fa-cube'|fieldname1|Fieldname2 where fieldname1 and fieldname2 can be every field related to your DSO. Within the vue-template you have access to
1. fieldname1 via key
2. fieldname2 via decs
3. but you can also access every DSO-related field via currentRecord.fieldname (fieldname must be specified in lowercase)

2. Creation of the Template

This step is not needed if you use one of the existing templates

1. Create a new Vue template in src/webui/templates with the extension .vue
‣
Here is a simple example to display records as cards:
2. Declare the Vue template in index.ts in the following view:

export const yourtemplatename = () => import(/* webpackChunkNAme: "yourtemplatename" */'./yourtemplatename.vue');

3. Reload and Launch

1. Perform a hard reload and empty the cache and check the result.

Use Cases

Back to Documentation

Back to Home Page