Core Development

Web Panel Developer Guide Part 5. Core development: adding new models and components to the Headwind MDM web panel.

Add a new model

To add a new model to the code (the code of data models is located in the common module), you need to do the following:

  • Add the database table for the model to the Liquibase changelog file server/src/main/resources/liquibase/db.changelog.xml.
  • Create a class representing the model instance to persistence/domain.

    • To keep the code compatible with the future versions of mobile apps (and frontend), it is recommended to use the JsonIgnoreProperties annotation:

    @JsonIgnoreProperties(ignoreUnknown = true)
  • Create classes and XML files to manage the model data in the database in persistence/mapper.
  • Implement the Data Access Object (DAO) representing the high level logic of work with the model.
  • Add this DAO class to the services and web resources where applicable:
    • private NewModelDAO newModelDAO;

@Inject
public SomeResource(NewModelDAO newModelDAO, …) {
    this.newModelDAO = newModelDAO;
}

Notice: data models are located in the common module. Therefore, after updating the code, it is required to run the Maven command

mvn install

to make the new code available for the server module and all plugins.

Multi-Tenancy

Please note that Headwind MDM is a Multi-Tenant system, that is, it may be used to host multiple independent organizations (tenants). Despite the on-premise solution is in fact single-tenant, it is recommended to add the CustomerID property to each new model (or make a reference to an existing model having the CustomerID property). Also, we recommend to check that DAO restricts access to data objects and the user can only access data having the same CustomerID.

Add a new component

The new component of the web app at least consists of a model and a web interface working with this model.

Therefore, the first step is to add the code for the model (see the previous section).

The web interface consists of the backend code (server-side REST methods) and the frontend code (user interface).

Backend

To implement the backend, do the following:

  • Implement the class resource/NewComponentResource. To reflect the API methods of the new resource in SwaggerUI, use the @ApiOperation annotation.

    • The responses are encapsulated in the com.hmdm.rest.json.Response container.

  • If custom JSON requests or responses are used, implement the classes representing these JSON objects in rest/json.
  • Add the resource class to the Guice initializer: guice/module/PublicRestModule or PrivateRestModule.

There is the following difference between Public and Private methods. Public methods do not require authorization, whereas the private method require an authorized user (through either the built-in Spring cookie-based mechanism or the JWT-based mechanism for third party apps).

Frontend

The frontend code for new resources must be stored in webapp/app/components/main.

The implementation of the frontend consists of the following steps:

  • Create the required views (for example, CRUD controller requires at least the table view and the view for the popup edit dialog) and store them in main/view and main/view/modal.
  • Add localization strings for the new component to localization/*.js.
  • Implement the AngularJS controller and store it in main/controller.
  • Implement the interface to the REST services (AngularJS factory method), store it in service/main.service.js or add a new JavaScript file for the new service.
  • Add references to all new JavaScript files in index.html.

    << Part 4: Plugin development