Discussion

38
Views
matrm Member since 2014 3 posts
PEGA
Posted: 2 weeks ago
Last activity: 2 weeks 1 day ago

Invoking Pega Mobile Client Custom Modules from the Pega Platform UI

Custom Modules are a Pega Mobile Client feature allowing custom native code to run in the context of a Pega application running inside the client. Custom modules can be used to integrate native libraries, add features, and address requirements for devices or Apple-iOS features that are specific to a user's use cases.

Note: This article covers the essentials of integrating a PMC Custom Module with a Pega application and assumes that the user already has basic iOS/Android knowledge.

Prerequisites Familiarize yourself with the basics of Custom Module development: 

window.pms.plugins.samplePlugin.sayHello("Developer").then(function(result) { 
   console.log(result) 
}) 

To invoke a Custom Module from the Pega Platform, perform the following actions:

  • Add a data model for the data retrieved from the Custom Module.
  • Configure a Control that invokes the Custom Module JS API and sets appropriate values in the model.
  • Set up a section to include the newly created control, trigger the control code, and display the result.

To invoke a Custom Module from the Pega Platform, perform the following actions:

  • Add a data model for the data retrieved from the Custom Module.
  • Configure a Control that invokes the Custom Module JS API and sets appropriate values in the model.
  • Set up a section to include the newly created control, trigger the control code, and display the result.

 

  1. In Dev Studio, create a new case type for the Custom Module that you want to use. 
  2. Create a data object for the data that will be returned by the Custom Module and add it to the case. In this example it will be a simple Text Property called "Greeting". Property configuration  
  3. Create a new Control that will provide the JS code required for invoking the Custom Module JavaScript API. This control will utilize the Pega UI API to set the values on the form.  Note: The Pega UI API setValue will only work if the target property has an editable input field on the screen. If you make the fields read-only, setValue will not work.  
  4. On the HTML tab, disable the auto-generated mode and enter the following HTML source code:  
    <script>
      function callModule() {
        window.pms.plugins.samplePlugin.sayHello("Developer").then(function(result) { 
          pega.api.ui.actions.setValue("pyWorkPage.Greeting", result, false, null);        
        }) 
      }
    </script>
    Result: The system displays the control configuration as in the following figure: Control configuration

After saving your changes to the newly created Control, you must configure the section that will be using the Custom Module. Open the section and start by adding a field. This field will be an instance of the control that you created in step 3. Add the field by adding a simple Text Input and then changing it to the newly created control type. After you add the field, clear the Use property default check box and leave the Label value field empty, so that the field won't be visible.

Cell configuration

When you add the control, the JavaScript code that you wrote earlier becomes available. The next step is to add a button that will invoke the control. Set the Click action to run the script that you defined inside the control, as in the following figure:

Button configuration

Finally, add a field that references the value of the property that will be modified by the Custom Module invocation., as in the following example:

Configured cell

You can now run the mobile application, and once the button is pressed the greeting message should be displayed in the Greeting text field.

iPhone Simulator displaying Greeting

***Edited by Moderator: Pooja to add developer knowledge share tag***
Pega Mobile Client 8 Mobile Developer Knowledge Share
Share this page LinkedIn