Form layout manager

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

Basic example

To include the o-form-layout-manager component in your application you just have to wrap the desired data collection component with the form layout manager and it will manage the transitions between that component view and its detail component (without having to modify the routing module).

<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 three available modes: tab, dialog and split-pane.

Tab mode

Select the tab mode and the data collection component and its detail form will be 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 input. You can see a working example of this mode in the OntimizeWeb Playground or the customers module of the OntimizeWeb QuickStart.

Form layout manager in *tab* mode

Options

It is possible to configure tab mode options with the o-form-layout-tabgroup-options component. This attributes are explained in 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 in displaying the form detail in a dialog over the data collection component.

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

Form layout manager in *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>

Split pane mode

Select the split-pane mode and the collection component and the detail form will be displayed in a splitted screen. This allows seeing both components at the same time and also being able to resize the display.

You can select this mode setting the value split-pane to the mode input. You can see a working example of this mode in the form-layout-manager module of the OntimizeWeb Playground.

Form layout manager in *split-pane* mode

Options

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

Example

<o-form-layout-manager mode="split-pane" attr="o-form-layout-split-pane-form">

  <o-form-layout-split-pane-options width="600px"></o-form-layout-split-pane-options>

  ...

</o-form-layout-manager>

Options definition

The different available modes options can be setted in two ways: using the mode option tag or including the mode inputs in the o-form-layout-manager tag.

  <o-form-layout-manager mode="tab" attr="o-form-layout-customer-home"
   title="CUSTOMERS" label-columns="SURNAME;NAME" separator="," icon="info" color="warn">
  
  ...

  </o-form-layout-manager>

Is equivalent to:

  <o-form-layout-manager mode="tab" attr="o-form-layout-customer-home">
    
    <o-form-layout-tabgroup-options color="accent" title="CUSTOMERS" 
      label-columns="SURNAME;NAME" separator="," icon="info" color="warn">
    </o-form-layout-tabgroup-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	*Deprecated*. Form data columns used in the detail form title. Separated by ‘;’
mode tab \| dialog \| split-pane	Form layout manager mode	dialog
separator string	*Deprecated*. 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	*Deprecated*. Detail form main title
title-data-origin string	*Deprecated*. `attr` of the form component used for retrieving the data used on the tabs title

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

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.
label-columns string	Form data columns used in the detail form title. Separated by ‘;’
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	Min width of the dialog.
position DialogPosition	Position overrides
separator string	Separator between multiple label columns values	’ ‘ (blank space)
title string	Detail form main title
width string	Width of the dialog.

Name	Since	Description	Default
detail-max-width string \| number		Max width of the detail container.
detail-min-width string \| number		Min width of the detail container.
detail-width string		Width of the detail container.
main-max-width string \| number		Max width of the main container.
main-min-width string \| number		Min width of the main container.
main-width string		Width of the main container.

Name	Description	Default
background-color ThemePalette ('primary' \| 'accent' \| 'warn')	Background color of the tab nav.
color ThemePalette ('primary' \| 'accent' \| 'warn')	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
label-columns string	Form data columns used in the detail form title. Separated by ‘;’
separator string	Separator between multiple label columns values	’ ‘ (blank space)
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

Form layout manager

Basic example

Tab mode

Options

Example

Dialog mode

Options

Example

Split pane mode

Options

Example

Options definition