Form layout manager

A very common feature on management applications is displaying a form with the details related to a row from a data table. As a solution for this, OntimizeWeb offers the o-form-layout-manager component, that allows you managing the transitions between the data table and the form with the row details.

Basic example

For including the o-form-layout-manager component in your application you just have to wrap the desired data table with the form layout manager and it will manage the transitions between the table view and the detail forms.

<o-form-layout-manager attr="formLayoutMngr" mode="tab" title="Customers" label-columns="SURNAME;NAME" separator=",">

  <o-table attr="customers" title="Customers" service="customers" entity="customer" keys="CUSTOMERID" columns="CUSTOMERID;NAME;SURNAME"
    visible-columns="NAME;SURNAME">
  </o-table>

</o-form-layout-manager>

This is a summarized example of the customers module of the OntimizeWeb QuickStart.

The o-form-layout-manager component has two available modes: tab and dialog.

Tab mode

Selection the tab mode the data table and the detail form are displayed in tabs. This allows opening multiple form details at the same time and switch between them quickly.

You can select this mode setting the value tab to the mode attribute. You can see a working example of this mode in the customers module of the OntimizeWeb QuickStart.

Form layout manager in *tab* mode

Configure tab mode options

It is possible to configure tab mode options with the o-form-layout-tabgroup-options component. This attributes are explained on the API section of this page.

For complex labels, you can add <ng-template let-tabData="tabData">...</ng-template> and inside you can define your template. It’s important than the tabData attributes are including in labe-columns.

Example

<o-form-layout-manager mode="tab" title="CUSTOMERS" label-columns="SURNAME;NAME" separator=","
  attr="o-form-layout-customer-home" title-data-origin="customers_form_edit">
  <o-form-layout-tabgroup-options background-color="primary" color="accent" header-position="below">
    <ng-template let-tabData>
      <mat-icon>person</mat-icon>
      {{tabData?.SURNAME}}, {{tabData?.NAME}}
    </ng-template>
  </o-form-layout-tabgroup-options>
 ................
</o-form-layout-manager>

Dialog mode

The dialog mode consists of displaying the form detail in a dialog over the data table.

Select this mode setting the value dialog to the mode attribute. You can see a working example of this mode in the branches module of the OntimizeWeb QuickStart.

Form layout manager in *dialog* mode

Configure dialog mode options

It is possible to configure dialog mode options with the o-form-layout-dialog-options component. This attributes are explained on the API section of this page.

Example

<o-form-layout-manager mode="dialog" title="BRANCHES" label-columns="NAME" separator=""
  attr="o-form-layout-branches-home">

  <o-form-layout-dialog-options width="600px" height="400px"
  disable-close="false" ></o-form-layout-dialog-options>

  ...

</o-form-layout-manager>

Name	Description	Default
attr string	Field identifier. Registry property if component is inside a form.
dialog-class string	*Deprecated*. CSS class attached to the dialog when the dialog mode is active
dialog-height string	*Deprecated*. The dialog height
dialog-max-height string	*Deprecated*. The dialog maximum height
dialog-max-width string	*Deprecated*. The dialog maximum width
dialog-min-height string	*Deprecated*. The dialog minimum height
dialog-min-width string	*Deprecated*. The dialog minimum width
dialog-width string	*Deprecated*. The dialog width
label-columns string	Form data columns used in the detail form title. Separated by ‘;’
mode tab \| dialog	Form layout manager mode	dialog
separator string	Separator between multiple label columns values	’ ‘ (blank space)
store-state no \| false \| yes \| true	Indicates whether or not to store component state	yes
title string	Detail form main title
title-data-origin string	`attr` of the form component used for retrieving the data used on the tabs title

Name	Description
onCloseTab	Event triggered when a detail tab is closed
onMainTabSelected	Event triggered when the main tab is selected

Name	Description	Default
backdrop-class string	Custom class for the backdrop.
class string \| string[]	Custom class for the overlay pane.
close-on-navigation no \| false \| yes \| true	Whether the dialog should close when the user goes backwards/forwards in history. Note that this usually doesn’t include clicking on links	yes
disable-close no \| false \| yes \| true	Whether the user can use escape or clicking on the backdrop to close the modal	no
height string	Height of the dialog.
max-height string \| number	Max height of the dialog
max-width string \| number	Max width of the dialog
min-height string \| number	Min height of the dialog
min-width string \| number	Form layout manager mode.
position DialogPosition	Position overrides
width string	Width of the dialog.

Name	Description	Default
background-color ThemePalette	Background color of the tab nav.
color ThemePalette	Theme color palette for the component.
disable-animation no \| false \| yes \| true	Disable the animations in the tabs	no
header-position 'above' \| 'below'	Position of the tab header.	above
icon string	Icon name (see Google material design icons)
icon-position 'left' \| right	Icon position

Form layout manager

Basic example

Tab mode

Configure tab mode options

Example

Dialog mode

Configure dialog mode options

Example