Ember - KB Addons

  • doc:dev-ember-addons


Put the following into application.hbs:

  @appName="My App"
  <KbNotify />

Add Header and Content sections to your template:


Add a Profile and one or more Panel sections.


The Panel::Group separates groups of controls e.g. buttons on the left and buttons on the right.










To add labels to input controls in the panel:

    <Input ...

… note:: For now, you will need to add labels to all the controls so the

spacing works correctly.

If you need two header rows, then add another header section. Setting mergeWithAbove to true will fix the spacing e.g:

<KbBase::Header @hasProfile={{false}} @mergeWithAbove={{true}}>

Data Display

  <KbDataDisplay::Head @heading="Variables">


    <KbDataDisplay::Body::RowList @caption="Attachments">

    <KbDataDisplay::Body::Row @caption={{key}}>



An addon will include an index.js file in the root of the package. To allow your project to auto-refresh, then set isDevelopingAddon to true in module.exports e.g:

module.exports = {
  name: require("./package").name,
  isDevelopingAddon: function () {
    return true


Copied from Two-column cards with separate submit actions https://tailwindui.com/components/application-ui/forms/form-layouts


To submit the form using the keyboard and to make sure the form isn’t submitted twice, add the onSubmit to KbForm::Form (not the Button).

      My Heading
      Some extra help...
  <KbForm::Form @onSubmit={{this.submitForm}}>

          Reason for deletion

          Please enter the reason for deleting the workflow process...




      <KbForm::Form::Button @buttonType="submit">
        Delete workflow

<KbForm::Separator />


The KbForm::Form::Button::Container probably isn’t needed if you have one button…

SVG Icons

  • We use https://heroicons.com/.

  • There are two types of icons, default and solid. Solid icons should be used on buttons (because they fit).

  • The component name should match the name of the icon e.g. the solid icon for arrow-circle-left is named addon/components/kb-svg/arrow-circle-left-solid.hbs


A checklist for handling data and for adding a spinner / nothing found to your table can be found here Tables / Data:




      {{#if @model.processes.isRunning}}
            <FaIcon @icon="spinner" @class="fa-pulse fa-2x" />
            Please wait ...






For pagination, see Pagination.

Upload (File)

Is a legacy component. I added a new @maxFileSize attribute e.g:


Source code:

Uses ember-file-upload: