New Feature: Open a Form inside a Modal
Posted March 21st, 2023
New Feature: Open a Form inside a Modal
Posted March 21st, 2023
An important feature of web applications is how easy and fast users can view and enter information.
A common use case is a need of adding missing data that is both essential and independent from the operation being made, without losing context.
With this need in our minds, we’ve improved our modals so that you can open forms, and cut those extra seconds spent on data insertion.
Now you can, without the need to redo your form or behaviours, open the form you’ve modeled for an entity and create, update or remove a record.
Like we’ve seen previously when modals were new to the Omnia Platform, it’s all done and configured in User Interface Behaviours, with JavaScript code like the following example:
const modal = {
name: "ItemForm",
type: "Form",
title: "New item",
formConfiguration: {
dataSource: "Default",
},
size: 'medium'
};
this._context.openModal(modal); In the example above, we’re instantiating a new object with four properties:
- “name”: the code of the entity (form) that will be opened;
- “type”: the type of entity to open. Since we want to open a form, the type is form;
- “formConfiguration”: properties to be used on the form modal (e.g. the dataSource we’re working on);
- “size”: the dimension of the modal to be opened.
After the modal configuration, we just need to open it, using the “openModal()” function inside the _context.
Let’s see some examples of what we can do with our modal forms:
Create new entities
In the sample above, we are inserting a new requisition and we check that the Item we want to select is not created yet.
With our modals we can easily open the form to create a new Item, and when the item is created we automatically add a new line with it.
View or Update an existing entity
We can open the form with a specific entity. This is useful for scenarios where we want to view the details of the selected entity or make a quick change to its data.
In the example above, we’re opening the form with selected GoElectric Supplier data. We’re also making a quick change to its data and automatically filling our Supplier Description field with the new value.
Useful tip: With the metadata property isModal that is available to be used on UI Behaviours, you can adjust how your form or dashboard looks and behaves. Let’s see a simple code snippet that hides the save option when located on a modal:
if(this._metadata.isModal)
{
this._metadata.attributes.saveOption = "hidden";
} You can also execute other operations that are available on the form you’re opening in the modal. Possible examples are entity deletion or custom operations you have previously modeled.
Remember that you can also open dashboards inside modals, to ensure that all your data visualization needs are fulfilled.
Here’s our official documentation page, if you want to see all the information about this improvement to our modals.
We hope you’ve enjoyed this improvement to the OMNIA Platform user interface. If you have any suggestions feel free to let us know, feedback is always welcome.
If you still don’t have this feature and want to start using it, remember to update your OMNIA platform to version 3.5.132.
Platform Update and Documentation
This new feature is part of our 3.5.132 version of the platform.
