Model Driven Apps (Part 3)

Model-driven apps JavaScript Developer Guide

JavaScript can be used to extend model driven apps.

It is possible to configure model driven apps to call a JavaScript function:

When a form has loaded (OnLoad)
When a user make a change to a control (OnChange)
When a user saves a record (OnSave); and
When a user clicks a button

The JavaScript function called might:

Validate user input
Show or Hide part of the form
Update a Business Process Flow
Display a Notification; or
Create a new Record

See also: Power Apps Component Framework

JavaScript to update a Business Process Flow Stage

Xrm.Page.data.process.moveNext() and Xrm.Page.data.process.movePrevious() can be used to update a Business Process Flow Stage.

JavaScript to Show or Hide a Tab

Xrm.Page.data.ui.tabs.get("<tab name>").setVisible(false) and Xrm.Page.data.ui.tabs.get("<tab name>").setVisible(true) can be used to hide or show a tab.

JavaScript to Read and Update Field/Control/Attribute Values

Xrm.Page.getAttribute('nh_businessneed').getValue() and Xrm.Page.getAttribute('nh_businessneed').setValue('Hello') can be used to read or update a field/column/attribute value.

JavaScript to clone a record

Xrm.WebApi.retrieveRecord("<table name>", <record id>) can be used to retrieve a record

Xrm.WebApi.createRecord("<table name>", ) can be used to create a record

Xrm.Navigation.navigateTo({ pageType: "entityrecord", entityName: "<table name>", entityId: <record id>}, {}) can be used to navigate to a page where a user can view a given record

Xrm.Page.ui.setFormNotification("<message>","<level>") can be used to add a message

Here is the code needed to clone the current record

async function Clone_aux() {

    try {
        const existing_entity = await Xrm.WebApi.retrieveRecord("nh_project", Xrm.Page.data.entity.getId())
        const clone_entity = await Xrm.WebApi.createRecord("nh_project", { 'nh_businessneed': existing_entity.nh_businessneed })
        await Xrm.Navigation.navigateTo({ pageType: "entityrecord", entityName: "nh_project", entityId: clone_entity.id }, {})
        Xrm.Page.ui.setFormNotification("Project Item Copied", "INFO");
    }
    catch (error) {
        Xrm.Page.ui.setFormNotification(error.message, "ERROR");
    }

}

Clone_aux()

Configuring a model driven app to call a JavaScript function

I added a Clone button to a model driven app's form command bar and used JavaScript to implement the record copying functionality

Notice that in the Modern Command Designer the execution context is not passed to a JavaScript handler function as a parameter.