Logo

    Home

    Documentation

    Use Cases

    Training

    Applications

    Release Notes

    Custom Component Templates

    Custom Component Templates

    • 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 ViewCard View, SwatHtmlContainer or SwatHtmlPanelContainer.

    image
    SwatHtmlPanelContainer object template example
    SwatHtmlPanelContainer object template example

    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:
    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.
      4. 
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:
      3. 
(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

    icon
    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();

    💡

    Under composablesUtils you will find the following composables:

    customStates - for custom state handling

    dateFormat - for date formatting execCode - for executing client logic code launcher - for opening repository objects templateOptions - for reading dynamic template options: image, key and description translate - for translating text

    Back to DocumentationDocumentation

    Back to Home Page

    Logo
    <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>