Smart M.App discussions

[smoeller]

Hi,

is there any way to customize a feature analyser panel with own code? Unlike with Map or BI panels it doesn't seem to be possible to add code via the editor in FA panels.

Is there a way to integrate existing Analyser views in a custom panel and interact with them?

Thanks and regards,

Sven

[rgammon]

Dear Sven,

Feature Analyzer is a Smart M.App application, and given this, there is no way to customize the out-of-the-box configuration panel. However, yes you can integrate Analyzer Views into a custom panel and interact with them via M.App Studio. Analyzer includes an API. This API can be used within M.App Studio to create customized applications. If you would like to learn more about this, please do not hesitate to contact me.

I hope this helps.

Robert

[smoeller]

Hello Robert,

thank you for the explanation.

Can you provide me with a documentation of the analyzer API? Are there any examples? How do I integrate an axisting Analyser View within a custom panel?

Thanks!

[rgammon]

Hello,

Please see attached for the Analyzer API Documentation. 

Robert

PS. I have a video which demonstrates how to integrate an Analyzer View within a custom panel. I will try to send this in another reply.

Analyzer API Help (PDF).pdf ‏234 KB

[rgammon]

Hello again,

Please see attached for a video on how to integrate an Analyzer View within a custom panel.

Robert

PS. If you need some sample code, please let me know and I will set what we can dig up.

Analyzer_API_Video_LOW_RES.zip ‏3140 KB

[smoeller]

Hi Robert,

yes some sample code would certainly be helpful.

Regards,

Sven

[smoeller]

Hi Robert,

do you have some sample code for me please? For example I would like to manipulate the dataset that is used in the analyzer view.

[smoeller]

Hi Robert,

how can I integrate my view in a custom panel and interact with it? I tried using an iframe, but it only loads if I am logged in to M.App Enterprise Studio.

Do you have any example for me?

Regards,

Sven

[rgammon · Accepted solution]

Hello,

Below please find some sample code. This code was provided by development (thank you).

Note:

These examples have now been added to the Analyzer documentation. More specifically, the Analyzer Suite of documentation now includes a dedicated section on the Analyzer API. This documentation will be included with the next official release of the Analyzer Suite. Ideally, this release will happen next week, the week of February 19, 2018.

Robert

Sample 1: (M.App Enterprise) – Override the Information Window Button

window.parent.addEventListener("message", function (event) {
if (event.data.method === "show_about_box") {    
    console.log("Information Window Request");
    var win = window.open("", '_blank');
    win.focus();
   }
}, false);      

Sample 2: (M.App Enterprise) – Disable Tooltips on a Boundary Layer

gsp.m_app.messages.subscribe("Analyzer.onViewReady", function (messageParams) {    
    gsp.m_app.messages.send("Analyzer.setTooltipsEnabled", { layerName: "stockBoundaryLayer", enabled: false });    
});

var frameHost = window.parent.document;
var boxes = frameHost.querySelectorAll(".box");

boxes[0].style.display = "none"; // hide custom frame
boxes[1].style.top = "0";
boxes[1].style.height = "100%"; // make analyzer full height
boxes[1].style.position = "absolute"; // make analyzer full height

Sample 3: Synchronizing Two Analyzer Views

var pointViewStats = {};
var pointViewMap = {};

var areaViewStats = {};
var areaViewMap = {};
var areaViewFieldStats = {};

var view1 = "IA-SYNC-PT"; // replace with the name of your first view
var view2 = "IA-SYNC-AREA"; // replace with the name of your second view

var view2StatsFieldName = "ZONE";

function updateView() {
    
    // Example for # incidents / 1000 households
    var staticHouseholdCount = areaViewFieldStats.sum;
    var incidentsPerHosehold = (pointViewStats.count / staticHouseholdCount).toFixed(2); // 2 decimal places
    
    var bannerText = incidentsPerHosehold + " incidents / " + staticHouseholdCount + " households";
    
    document.getElementById("pointStat").innerHTML = "<b>Point View</b> - (filtered: " + pointViewStats.count + ", total: " + pointViewStats.total + ")";
    document.getElementById("areaStat").innerHTML = "<b>Area View</b> - (filtered: " + areaViewStats.count + ", total: " + areaViewStats.total + ")";
    
    if (pointViewMap.center)
        document.getElementById("pointMapPos").innerHTML = "<b>Point Map Position</b> - (lat: " + pointViewMap.center.lat + ", lng: " + pointViewMap.center.lng + ", zoom: " + pointViewMap.zoom + ")";
        
    if (areaViewMap.center)
        document.getElementById("areaMapPos").innerHTML = "<b>Area Map Position</b> - (lat: " + areaViewMap.center.lat + ", lng: " + areaViewMap.center.lng + ", zoom: " + areaViewMap.zoom + ")";
    
    document.getElementById("bannerText").innerHTML = "<b>" + bannerText + "</b>";
    
}

gsp.m_app.messages.subscribe("Analyzer.onGetFilterConfiguration", function (messageParams) {
    debugger;
});

// This block handles onViewUpdated events from Incident and Area Analyzer
gsp.m_app.messages.subscribe("Analyzer.onViewUpdated", function (messageParams) {
    
    switch (messageParams.viewName) {
        case view1: // will receive view updated events for Incident Analyzer (View: IA-Test)
            pointViewMap = messageParams; // stores view info for later use 
            
            // Syncs the view with the other analyzer window
            messageParams.targetViewName = view2;
            debugger;
            gsp.m_app.messages.send("Analyzer.updateView", messageParams ); 
            gsp.m_app.messages.send("Analyzer.getFilterConfiguration", messageParams ); 
            
            break;
        case view2: // will receive view updated events for Area Analyzer (View: IA-Test-Poly)
            areaViewMap = messageParams; // stores view info for later use
            
            // Syncs the view with the other analyzer window
            messageParams.targetViewName = view1;
            gsp.m_app.messages.send("Analyzer.updateView", messageParams);
            break;
    }
    
    // Updates text in the custom panel.
    updateView();
    
});

// This block sends viewUpdated events to Incident and Area Analyzer
gsp.m_app.messages.subscribe("Analyzer.onFiltered", function (messageParams) {

    // Stores the values received from IA/AA
    switch (messageParams.viewName) {
        case view1:
            pointViewStats = messageParams;     
            // Updates text in the custom panel.
            updateView();
                
            break;
        case view2:
            areaViewStats = messageParams;   
            gsp.m_app.messages.send("Analyzer.getStatistics", { fieldName: view2StatsFieldName, targetViewName: messageParams.viewName });
            break;
    }
    
});


// This block of code listens for Analyzer to return statistics for the given field. Once statistics are retreived, update the GUI.
gsp.m_app.messages.subscribe("Analyzer.onGetStatistics", function (messageParams) {
    areaViewFieldStats = messageParams;
    // Updates text in the custom panel.
    updateView();
});

[DaveOke · Accepted solution]

Sven,

You'll need to create two panels (Top/bottom config). Top panel a custom panel and the bottom an Analyzer panel. Load your view into the Analyzer panel. You can then use the custom panel to place all code needed to interact with Feature Analyzer.

If you don't want the custom panel visible during runtime, use this code in the custom panel to hide it:

var frameHost = window.parent.document;
var boxes = frameHost.querySelectorAll(".box");

boxes[0].style.display = "none"; // hide custom frame
boxes[1].style.top = "0";
boxes[1].style.height = "100%"; // make analyzer full height
boxes[1].style.position = "absolute"; // make analyzer full height