Windows Grid components

You can aggregate some components as a child into the windows to, for example, add buttons to display your content.

WindowActions

Component injected in each window and contains all the actions, is shown if the grid is on flexible windows. To inject more actions to the windows header, you need to put your custom component as a child.

Props

• showWhen Array [REQUIRED]

  Array of layout ids to filter when shown, depending on the current layout. If you want to show the action always put a '*'.

uiHelper.addChildToComponent('WindowActions', {
  componentName: 'YourCustomAction',
  order: 2,
  props: { showWhen: ['*'] },
});

WindowAction

Generic window action to be injected as a child in the WindowActions to add your custom action.

Props

• showWhen Array [REQUIRED]

  Array of layout ids to filter when show that action depending on the current layout, if you want to show the action always put a '*'.

• disabled Boolean [REQUIRED]

  Indicates if the icon is available or disabled

• iconName String [REQUIRED]

  The icon of the action, you can use all the Icons of pos-web-components

• action Function [REQUIRED]

  The action executed when the action is clicked if the action is available

uiHelper.addChildToComponent('WindowActions', {
  componentName: 'WindowAction',
  order: 2,
  props: {
    showWhen: ['*'],
    disabled: false,
    iconName: 'PrintIcon',
    action: alert('Printing...'),
  },
});

Masthead

That component is showed as a replacement of the WindowHeader when the windows grid is on fullscreen. This component accepts two position children: START and END.

• START: It's the default position and we encourage you to inject here the MastheadTitle to put your custom titles.

  Example

  Copy

  uiHelper.addChildToComponent('Masthead', {
    componentName: 'MastheadTitle',
    order: 2,
    props: {
      showWhen: ['layout-1'],
      title: 'Layout 1',
    },
  });

• END: It is created to inject all the actions that you want. It is a replacement of WindowAction but created for fullscreen mode.

  Copy

  uiHelper.addChildToComponent('Masthead', {
    componentName: 'PrintMastheadIcon',
    props: { showWhen: ['layout-1'], position: 'END' },
  });

MastheadTitle

With this component you can add a title on your masthead.

Props

• title String [REQUIRED]

  The primary title of the masthead

• supportingTitle String [OPTIONAL]

  Supporting title shown after primary title. (Under development)

• subtext String [OPTIONAL]

  Subtext title shown down the primary and supporting titles. (Under development)

uiHelper.addChildToComponent('Masthead', {
  componentName: 'MastheadTitle',
  order: 2,
  props: {
    showWhen: ['layout-1'],
    title: 'Primary Title',
    supportingTitle: 'Supporting Title',
    subtext: 'Subtext',
  },
});

WindowMenu

This is an action injected in all the windows. It is a menu that accepts options to be injected as a child; it is shown if the grid is on flexible windows. We encourage you to use the WindowMenuOption to create your custom option.

WindowMenuOption

This is a generic window menu option to be injected as a child in the WindowMenu to add your custom option in the menu.

Props

• name String [REQUIRED]

  The name to be shown in the menu for this option.

• disabled Boolean [REQUIRED]

  If the option is enabled.

• action Function [REQUIRED]

  The action triggered if the option is selected.

Example

uiHelper.addChildToComponent('WindowMenu', {
  componentName: 'WindowMenuOption',
  order: 0,
  props: {
    name: 'My option',
    disabled: false,
    action: alert('My option!'),
  },
});