M.App Enterprise Tutorials

Not sure on how to get started or looking for a workflow to get M.App Enterprise up and running. Tutorials provide step by instruction on some of the most common configurations and workflows to get M.App Enterprise configured up and running quickly.
Showing results for 
Search instead for 
Do you mean 

How To: Integrate Workflows with Analyzer

by Technical Evangelist on ‎08-17-2020 06:08 AM - edited 3 weeks ago by Technical Evangelist (324 Views)

This tutorial will walk through the process of creating a workflow & calling the workflow from an Analyzer dashboard. Two-way communication between the workflow engine and Analyzer will be demonstrated.

 

This tutorial is broken up into three key parts:

  • Creating the Workflow
  • Creating the Analyzer View
  • Testing the Workflow in Analyzer

 

Prerequisites

  • M.App Enterprise installed with Studio & App Access
  • A Database with an active Connection into M.App Enterprise Studio
  • A Data table which can be used in Feature Analyzer as Live Data

 

Creating the Workflow

 

You will set up a workflow in the same way you would for a thick client app. There are only a couple of key differences:

  • How the workflow is called (I.e. passing an identifier from Analyzer to the workflow engine)
  • How the workflow interacts with Analyzer

 

Follow these steps to set up a basic workflow in M.App Enterprise Studio:

 

  1. Click Content->Workflows
  2. Click New
  3. In the Name field, enter in AnalyzerWorkflow
  4. Select an existing connection
  5. Click Save

 

Next, you will set up a basic edit form:

  1. Launch the Workflow Editor for AnalyzerWorkflow
  2. Drag a new Form Node to the [Root] Node.
  3. Call the new node id: edit
  4. Click OK

 

In the Properties panel:

  1. Set the Label to: Edit Record
  2. Set the Form to: EditRecord
  3. Set Follow Node to: Root

 

Open up the form editor by clicking the edit icon next to “Edit Record”. The objective will be to set up a basic form. Click NewForm1 and then set the following properties:

 

  1. Change the Label to “Simple Editor”
  2. Set the table property to a table in your database.
  3. Set the ID Field to the primary key for your table.
  4. Set the DataType to number.

 

Next, you will add some basic form elements. The first field represents the primary key for your table. The primary key definitoin is mandatory; however, you can set the Visible property to the static value “hidden” to hide it.

 

  1. Drag a TextField Widget to NewGroup1.
  2. Set the following properties:
    1. Name: set this to the field name of the primary key for your table
    2. Label: set this to the field name of the primary key for your table
    3. Datatype: set this to the datatype of the primary key for your table

 

Repeat the process above for a different field in the database. Later on in the tutorial, you will edit the value of this field using the Workflow in Analyzer.

 

Next, you will create two actions – Cancel and Update. Drag Two Action widgets underneath your last field definition. Next, edit the properties for the first action:

 

  1. Name: cancel
  2. Label: Cancel
  3. Action: SCRIPT[closeWorkflow()]

 

And the next Action:

 

  1. Name: update
  2. Label: Update
  3. SCRIPT[saveForm()]

 

Next, we’ll need to define some script to implement the two functions above: closeWorkflow, and saveForm:

 

  1. Click Resources at the top of the screen.
  2. Click New -> Script
  3. Set the Script field to AnalyzerFunctions and then click Update
  4. Copy/Paste the following script:

 

function getAnalyzerAPI() {
  return window.parent.Analyzer;
}

function getAnalyzerWorkflowHTMLWidget(stageModel) {
  
  return stageModel.widgets.find((widget) => {
    return widget.title === "Editor";
  });
  
}

function closeAnalyzerWorkflowElements() {
  
  var analyzer = getAnalyzerAPI();  
  var stage = analyzer.findStageModel(); 
  
  // get the HTML widget hosting the workflwo IFrame.
  var workflowHost = getAnalyzerWorkflowHTMLWidget(stage);
  
  // Hide the workflow HTML chart.
  workflowHost.visible = false;
  workflowHost.reload();
  
  // Close the map popup, if open.
  stage.mapViews[0].getMap().map.closePopup();
  
}

function closeWorkflow() {  
  closeAnalyzerWorkflowElements();
}

function saveForm(approved) {
  
  IG.submit('Form','Save').done(function(result) {        
    closeAnalyzerWorkflowElements();

    // reload the dataset to reflect the update
    var analyzer = getAnalyzerAPI();  
    var stage = analyzer.findStageModel(); 
    stage.reload();
  });
  
}

 

 

Finally, we need to assign the script to the form:

  1. Click NewForm1 at the top.
  2. Click the “Sample Editor” label.
  3. In the properties panel, set Custom Scripts to: AnalyzerFunctions
  4. Click Save.

 

Calling the Workflow in Analyzer

 

The objectives for this part of the tutorial will be to:

  • Set up a new Analyzer view
  • Create a dynamic tooltip to call the workflow
  • Create a HTML chart to host the workflow.

 

First, create a new Analyzer view in M.App Enterprise Studio by clicking Browser -> Analyzer View -> New. Give the new Analyzer view a name and launch the Analyzer Editor.

 

First you will create a Live Data connection the same table used to define the workflow. Once this is done, click apply.

 

Next, we’ll add a HTML chart to host the workflow:

  1. Click Additional Charts->New
  2. Set the title to: Editor. The title must match the search title in the workflow script. This is how the workflow engine finds the Analyzer HTML widget.
  3. Set the Type to: HTML Display
  4. Set the Dock to: Float
  5. Click Html->Edit
  6. Copy/Paste the following as your HTML definition: 

 

<iframe id="editInspection" width="100%" height="95%" frameborder="0" data=""></iframe> 

 

  1. Click Close
  2. Depending on Analyzer versions, click Style and check Prevent Automatic Widget Refresh and Allow User Mode Resizing
  3. Click Apply. You will see the empty container on the display.

 

Next, you will create a dynamic tooltip to launch the Workflow.

 

  1. In the Functional Attributes tab, click Add.
  2. Set the Functional Attribute name to Edit
  3. Copy/paste in the following script:

 

// You should only need to set these three parameters.

var nodeId = "edit"; // must match the id of the form
var primaryKey = "id"; // primary key of your table
var workflowName = "AnalyzerWorkflow"; // workflow name

// You should be able to leave the rest of this code as-is.

var chartTitle = "Edit";

// Configuration setup only executed once.
if(rowId === 0) {
    
  var config = TooltipController.CreateGenericConfiguration( async (row, currentRecord, attributeData, extendedConfiguration) => {
    
    var updateElement = (html) => {
      var list = $('[id="' + config.configuration.prefix + row + '"]');
      for (var index = 0; index < list.length; index++) {        
        $(list[index]).html(html);
      }
    }
    
    window.popupwf = (id) => {
      
    	var auth = M.app.state.connector.getAuthInfo();
    	var tenant = M.app.state.connector.tenant;
      
      	var customHtmlWorkflowWidget = Analyzer.findStageModel().widgets.find((widget) => {
    		return widget.title === "Editor";
  		});
            	
        customHtmlWorkflowWidget.on("onMounted.wfWdiget", (widget) => {
          setTimeout(()=> {
    		$("#editInspection").attr('src', '/Workflows/?tenant=' + tenant + '&nodeid=' + nodeId + '&id=' + id + '&workflow=' + workflowName + '&sessionid=' + auth.sessionId + '&lang=' + JSON.parse(localStorage.getItem('apps_storage')).userLanguage);              
          });
        }, 200);
      
        customHtmlWorkflowWidget.visible = true;
        customHtmlWorkflowWidget.reload();    
      
    }
    
    var element = document.getElementById(config.configuration.prefix + row);
    updateElement("<button onclick='popupwf(" + currentRecord[primaryKey] + ");'>Edit</button>");
        
    
  });

  config.configuration.name = chartTitle;
  TooltipController.RegisterCustomAction(config.configuration.name, config);
}

return TooltipController.RenderChart(chartTitle, rowId);

 

 

  1. Click Apply

 

Next, you will add this functional attribute in as a tooltip.

 

  1. Click Tooltip Configuration
  2. Click Add
  3. Set the Field Name to: “Edit”
  4. Click Apply

 

You will then format the HTML widget, enable tooltips, and save.

 

  1. Close the Configuration panel.
  2. Click Layer.
  3. Ensure that tooltips are enabled for the feature layer
  4. Move/Size the Editor window to your preference
  5. Close the Editor Window.
  6. Open up the Configuration Window and click Save

 

You can test the window behavior by clicking a point on the map and clicking the Edit button. The Editor window should appear and you should get a 401 Unauthorized error in the workflow window. You will receive this error in Studio mode as a session id is not available. In the next part, you will create an application from this view and launch the view in Apps mode to see the workflow in action.

 

In M.App Enterprise Studio:

 

  1. Click Browser -> M.Apps.
  2. Click New.
  3. Assign a Role and give the M.App a name.
  4. Click Save.
  5. Open on the M.App Editor for your new M.App
  6. Drag an Analyzer view to the center
  7. Select the Analyzer view you just created.
  8. Click OK, and then Save.

 

Testing the Workflow in Analyzer

 

Log into the M.App Enterprise Apps mode and launch your new M.App.

 

When your M.App has loaded:

 

  1. Click on a point. You should see a tooltip with the Edit button.
  2. Click Edit. The Editor HTML Widget should display along with the workflow:
  3. Verify that the Cancel button closes the Dialog.
  4. Repeat Steps 1 & 2. Update a field and then click Update. The dialog should close, and the database should be updated to reflect your edit.
Overview