Ofbiz Support Angular Cli Guide
Ofbiz Support Angular Cli Guide
Objective 1
Step 1 – Create the New Page Container Module 1
Step 2 – Create the New Page Components Contained Within the Page Container Module 2
Step 3 – Wire up MainFormComponent in Page Container Routing Module 2
Step 4 – Add our new page container Module and associated Routing Module to the SPA 3
Step 5 – Building MainFormComponent (Part 1) 3
Step 6 – Building MainFormComponent (Part 2) 6
Step 7 - Adding the Material Dialog 7
Step 9 - Building the Material Lookup Form 8
Step 10 - Using OfbizSupportModule feature ag-auto-grid to display the results 9
Step 11 - Passing the partyId selected in the Dialog Back to MainFormComponent 11
Objective
Create a simplified version of the 'find' form found in ofbiz '/ordermgr/control/findorders' with just 1 input field the
partyId input a Dialog popup search on it, using material components.
In fact the view found at '/ordermgr/control/findorders' is backed by the “findOrders” service which means with ofbiz-
auto-form component you could render the whole form in bootstrap or material and customize it in a single directive
element. But since adding a Dialog popup search box is a feature which is not yet implemented in the ofbiz-auto-form
component, this guide explains the manual form building process.
The search results in the Dialog uses the ag-auto-grid component directive, imported with ofbiz-support.module, to do
the lookup and display the results. We are using 2-way binding just to dynamically set the conditions on the ag-auto-
grid component directive according to inputs into the forms.
The cli will create the page “feature” module with it's own routing module and then also show the line
WARNING Module is generated but not provided, it must be provided to be used
What this means is that the new modules are not yet part of the rest of the application. In order for a menu item for them
to appear they need to be imported into the application root module and of course contain components which we will
create next.
At this point however you can see that the cli has created a directory with 2 ts classes one in each file. The module and
the routing module for this new page container
Step 2 – Create the New Page Components Contained Within the Page
Container Module
Now we want to provide routing for the MainFormComponent, so we can browse to in in our app and stay abreast of
changes we make as we build it.
So in form-demo-page-routing.module.ts file we are going to add a route to the 'const routes' that was created by the cli
Step 4 – Add our new page container Module and associated Routing Module to
the SPA
Now in order to be able to navigate to this route via our apps sidenav menu we need to add our new page container's
module and the routing module created in step 1 to the application root module.
So in src/app/app.module.ts add import statements along with the 2 new Modules to the NgModule decorators import
property.
Now we should be able to browse to out new component by selecting the 'Form Demo' menu item that has appeared in
out side navigation.
That is the default content created by the cli. In angular wiring things up always precedes template and component logic
creation, which takes place in tandem with the application running.
This is necessary because we are using the inputs from to call the 'findOrders' service and return the entity list in the
ServiceResults, we are then doing to pass the json equivalent of List<GenericValue> into ag-grid for display purposes.
This is a direct implementation of ag-grid with all the usual configuration, not using the ag-auto-grid component which
handles much automatically using entity metadata.
So to use ag-grid directly we need to import its module and associate the components which will use it within our
FormDemoPageModule
Exercise - the chance to get your feet wet and build something
At this point you can click the find button and see the OrderHeader results printed to the console, as seen above. From
this entity structure you can complete 'gridoptions' and 'columnDefs' properties in the component class using the
example found on https://www.ag-grid.com/example-angular-rich-grid/#gsc.tab=0 as a reference. Then once that is
completed add this.ordersResult = result.orderList
under console.log("result: " + JSON.stringify(result)); to display the results.
So now in the ModalContentFormComponent we are going to create the first part of the dialog content, for the lookup
form using material form directives. I am not
going to go through that process step by step. But
basically wiring it up is the same as with
DialogOverviewExampleDialog except the
entryComponent is
ModalContentFormComponent.
Step 10 - Using
OfbizSupportModule feature ag-auto-grid to display the results
Here we are are not going through the process described in the Exercise, but rather using an OfbizSupportModule
feature ag-auto-grid which makes the task of showing lookup results very quick and easy.
In ModalContentFormComponent we have a find() method which sets a boolean which is used in an *ngIf directive
where the ag-auto-grid component directive is. The conditions input on the ag-auto-grid element is constructed using
the bound properties of the form inputs.
This is the easiest way although we could also you an rxjs event channel here and a child component to hold the grid.
Since we are not going that route we also need a clear button that will clear the fields and set the boolean back to false
which will remove the grid from the template.
In yellow we
see the 2-way data binding between our dialog component template and component class.
[(ngModel)] is what is known as a “banna box” and represents a binding both from template to class and class to
template. We are using the class to setup the starting select options in the template and the class to set them back to their
starting state in the clear() method. We are also using the template to populate the formInput object in the class so that
we can use thoes values elsewhere in the template.
In purple we see a 1-way event binding on the button element (click). () indicate a binding from the template to the
class. The clear() method sets this.submitted back to false which hides the auto grid. It also sets this.formInput which as
mentioned is double bound back to it's starting state.
In blue we also have a 1-way event binding on the button element (click). All the submit() method does is set
this.submitted to true which we can see in green on the template, angular detects this change and renders the ag-auto-
grid component directive using values from the form to specify conditions.
Finally in red we see output from ag-auto-grid which is triggered within the implementation when a row is selected (it
should be noted on ag-auto-grid a row can only be selected if the [rowId] option is provided). The event is emitted from
within ag-auto-grid and it carries the data from the selected row. Here in the ModalContentFormComponent we are
catching that event and passing it into the selected() method in the component class.
We can see in the red section of the ModalContentFormComponent class shown, how we are selecting just the partyId
out of the selected row which we received via an event and closing the dialog with this value as an argument.
We are setting this.formInput.partyId to the result value, since this.formInput.partyId also has a 2-way binding doing
this sets the input value.