Ember - KB Addons

  • doc:dev-ember-addons

Application

Put the following into application.hbs:

<KbBase
  @actionSignOut={{this.actionSignOut}}
  @appName="My App"
  @appMenu={{@model.appMenu}}
  @appLogo="/assets/img/logo-white-small.png"
  @currentContact={{this.currentContact}}
  @isAuthenticated={{this.session.isAuthenticated}}
  @logoLink="about"
>
  <KbNotify />
  {{outlet}}
</KbBase>

Add Header and Content sections to your template:

Tip

Add a Profile and one or more Panel sections.

Tip

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

<KbBase::Header>

  <KbBase::Header::Profile>
  </KbBase::Header::Profile>

  <KbBase::Header::Panel>

    <KbBase::Header::Panel::Group>
    </KbBase::Header::Panel::Group>

    <KbBase::Header::Panel::Group>
    </KbBase::Header::Panel::Group>

  </KbBase::Header::Panel>
  <KbBase::Header::Panel>
  </KbBase::Header::Panel>

</KbBase::Header>

<KbBase::Content>

</KbBase::Content>

To add labels to input controls in the panel:

<KbBase::Header::Panel>
  <KbForm::Form::Field>
    <KbForm::Form::Field::Label>
      State
    </KbForm::Form::Field::Label>
    <Input ...

  </KbForm::Form::Field>
… 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>
<KbBase::Header @hasProfile={{false}} @mergeWithAbove={{true}}>
  <KbBase::Header::Panel>

Data Display

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

  <KbDataDisplay::Body>

    <KbDataDisplay::Body::RowList @caption="Attachments">
      <KbDataDisplay::Body::RowList::Attachment
        @filename="workflow-variables.pdf"
        @download_type="variables"
        @download_url={{process.download_url}}
      />
    </KbDataDisplay::Body::RowList>

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

  </KbDataDisplay::Body>
</KbDataDisplay::Container>

Development

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
  },

Forms

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

Tip

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).

<KbForm::Container>
  <KbForm::Help>
    <KbForm::Help::Heading>
      My Heading
    </KbForm::Help::Heading>
    <KbForm::Help::SubHeading>
      Some extra help...
    </KbForm::Help::SubHeading>
  </KbForm::Help>
  <KbForm::Form @onSubmit={{this.submitForm}}>
    <KbForm::Form::Field::Container>
      <KbForm::Form::Field>

        <KbForm::Form::Field::Label>
          Reason for deletion
        </KbForm::Form::Field::Label>

        <KbForm::Form::Field::TextArea>
          Please enter the reason for deleting the workflow process...

          <KbForm::Form::Field::ErrorMessage
            @errorField={{this.changeset.error.deleted_comment}}
          />

        </KbForm::Form::Field::TextArea>

      </KbForm::Form::Field>
    </KbForm::Form::Field::Container>

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

  </KbForm::Form>
</KbForm::Container>
<KbForm::Separator />

Note

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

Table

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

<KbTable::Container>
  <KbTable::Table>

    <KbTable::Head>
      <KbTable::Head::Cell>
      </KbTable::Head::Cell>
    </KbTable::Head>

    <KbTable::Body>

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

          <KbTable::Body::Cell>
          </KbTable::Body::Cell>
          <KbTable::Body::Cell>
          </KbTable::Body::Cell>

        </KbTable::Body::Row>
      {{/if}}

    </KbTable::Body>

  </KbTable::Table>
</KbTable::Container>

Tip

For pagination, see Pagination.

Upload (File)

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

<KbForm::Upload
  @maxFileSize={{32000}}

Source code:

Uses ember-file-upload: