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>

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 @buttonType="submit">
      Delete workflow
    </KbForm::Form::Button>

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

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: