This example is mostly for learning purposes. If you need to create a simple model form for a single model level, it's recommended that you use User-Defined Pages.
This basic example features a simple create page that changes to a detail page after the user clicks the 'Create' button. We will start by creating a new file:
web/public/jsmodules/TaskDetail.js. In this, we'll define a JS class that extends
One.model.ModelFormContainer, as has been done in this Showcase example:
The first config option we need to add is the
modelInfoobject, which holds 2 properties:
customModelName. At least 1 is required to sufficiently describe the Model that the page is going to interact with. For our example, we will set the
"SHOW.Task", a model in the Showcase module.
If you only provide
modelLevelTypethen the framework will try to derive the
customModelNamegiven the model and surrogate id. If there is no surrogate id (as in the case of a create page) it will use the default, which is "Standard <ModelName>".
Next, we'll add a
createActionName. This property dictates what action the framework will use when trying to create and persist an instance of our Model in the database. So far we have the following code:
- In the MPT, we add a create action called
- After giving permissions to the new action for your user's role type, select the
Action Screentab, and select the
Detail Viewtab. As you can see, there are two options:
Define view. Reuseallows you to reuse an existing detail view (created in the
Define viewallows you to create a new view especially for this particular action; it cannot be reused by other actions and will not show up with the other views in the
Viewstab. For this example, we will use this feature, so select
- As you can see in the image above, it shows a listbox with the natural key fields automatically populated. Add other fields using the
Add Fieldsdialog by clicking the
Now that we have our create action added, let's a
detailViewNameproperty, which dictates which detail view to use when displaying the values for an existing Model instance. Here's the updated code for our example in Showcase:
- Go back into the MPT and add a view of type
Detailwhose name matches the
detailViewNameused in the JS class.
Finally, we need to register our new detail page. This has to be done in a way that all pages are aware of this registry, even if they have not loaded our TaskDetail js module. To achieve this, we add a line to the
GlobalRegistry.jsof our module. This file is referenced by
build.jsbso that this code goes into
instance.js, which is loaded on every page:
- That's all you have to do for a basic Create -> Detail page. Add your class (without any config) under a
WebActionand reference it in the
RoleTypeUiConfigin your UiMetaModel. Then open it in Command Center. As you can see below, you get the create page with the fields that were specified in the
- Execute the create action, you should see the detail page-load with a success message:
It's important to note here that your Model Form JS class can be opened with a
sysId property set (to the surrogate id of an existing Model instance), and it will open the default page.