Skip to main content

View / Angular

Once your data-operations are defined for the back-end, we can expose these to Angular to expand Forms and Actions.

DataConnector​

To expose a data-operation, an already exposed data-operation can be added as a DataOperationConnector as a child of DataConnector. Alternatively you can use the ConnectDataOperationsToAngular transmuter to automatically connect all exposed dataOperations.

  1. Navigate to your FeatureModule.
  2. In the tree-view, open the context menu of the dataConnector (right-click).
  3. Select "Connect Data Operations To Angular". This will add the connector mentioned above.

Forms​

To generate a form, a DataOperationForm child can be added to the DataView. The naming convention for forms is to use PascalCase (starting with uppercase). This form will mostly generate everything just by linking to a DataOperationConnector. Additionally, parameters can be marked to be customized. This will omit the default implementation and provide custom anchors instead.

Actions​

While a form component on itself is nice, you probably want to integrate it somewhere in your application. This is where Actions come in. DataOperationActions are also a child of DataView and should also use the PascalCase naming convention.

Actions come in three variants:

  1. Form Dialog Action opens a dialog with a Form referenced by this action. When the dialog is submitted, the form values will be serialized to the api call.
  2. Confirmation Dialog Action is performed without user input, but requires confirmation. Can be used for DeleteOperations.
  3. No Dialog Action is performed immediately without any further user intervention. Can be useful for actions like a Trigger.

You can define roles which specify where a DataOperationAction should be shown:

  • list-action-button Button above the table view without any context. Used for example with CreateOperations.
  • list-selection-action-button Button above the table view with selection context. Requires angular.customization.canSelectTableRow.
  • row-action-menu-option Button inside the action menu of the table row.