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

Description

Build.one allows the developers to use custom components to display data. It can be used on objects of type Card View, SwatHtmlContainer or SwatHtmlPanelContainer.

How to use it

1. Create a Vue Component 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>
  <div>
    <header>
      <a @click="openConditional">
        <h3>{{ currentRecord.fullName }}</h3>
      </a>
    </header>
  </div>
</template>

<script setup>
const globalUtils = window.akioma.composablesUtils();
const { callAkiomaCode } = globalUtils.execCode();
const { getCustomState } = globalUtils.customStates();

const props = defineProps({
  dataSource: {
    type: Object,
    default: null
  },
  dataSourceNamespace: {
    type: Object,
    default: null
  },
  currentRecord: {
    type: Object,
    default: null
  },
  controller: {
    type: Object,
    default: null
  }
});

function openConditional() {
  // do some logic here
}
</script>

3. When you created the file, you need to make it exportable in the index.ts 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 ctrl + 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-template

Vue Mixins (deprecated, use Composable and Composition API instead of mixins)

New composable utils can be found at: const globalUtils = window.akioma.composablesUtils();

Back to Documentation

Back to Home Page