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"
>
  {{outlet}}
</KbBase>

Add the Header in your template:

Tip

Add a Profile and one or more Panel sections.

<KbBase::Header>

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

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

</KbBase::Header>

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

<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>
    <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::Button>
      Delete workflow
    </KbForm::Form::Button>

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

Table

<KbTable::Container>

  {{#if @model.processes.isRunning}}
  {{else}}
    <KbPagination
      @model={{@model.processes.value}}
      @firstRecord={{this.firstRecord}}
      @lastRecord={{this.lastRecord}}
      @nextPage={{this.nextPage}}
      @previousPage={{this.previousPage}}
      @showPrevious={{this.showPrevious}}
     />
  {{/if}}

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