• Description
• How to use it
• 1. Create a Vue Template
• 2. Make changes
• 3. Connect the template to the B1 Component

Description

Build.one allows the developers to use custom HTML code to display data. It can be used in two ways, in a SwatHtmlContainer or in a template for some data display objects like Card View

How to use it

1. Create a Vue Template

1. Go to template folder /src/webui/templates
2. In this directory you can create a new templates, a default skeleton for a new template can be the next one:
Copy

<template>
  <!-- Template HTML design -->
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import utils from '@buildone/swat-utils';
const { mixins } = utils;

export default defineComponent({
  mixins: [ mixins.globalAkioma, mixins.templateOptions ],
  props: {
    // Your props
  },
  computed: {
    // Your functions
  }
});
</script>

3. When you created the file, you need to make it exportable in the index.js file in the same directory. To do this, copy an existing line and change the name to your newly created name, e.g.
Copy

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

2. Make changes

After you changed something in the template you have to make sure, that it is also compiled.

1. In Gitpod got to the bottom right panel and press crtl + c to stop the process
2. Than execute the last command by clicking up the command should look like this:
Copy

(feature/POC-371-adjust-panel-headers-to-concrete) $ cd ${GITPOD_REPO_ROOT}/src/webui && yarn build:watch-continue

3. Connect the template to the B1 Component

In the components that this is allowed, a Template attribute exists where you can specify the name of your template

The value of the Template attribute needs to be in kebab-case. So if your template in CamelCase is TheNameOfMyTemplate the value in the attribute written in kebab case is the-name-of-my-temaplte

Back to Documentation

Back to Home Page