Hexagon Geospatial
MENU

Smart M.App

Looking for answers in regards to M.Apps, M.App Exchange or M.App Studio? Smart M.App Tech Discussion board is where you can search, ask your questions and assist others by sharing your knowledge. Join the conversation, connect, contribute and share.
Showing results for 
Search instead for 
Do you mean 
Reply
Frequent Contributor
Posts: 115
Registered: ‎04-05-2016
Accepted Solution

Customizing Feature Analyser Panel

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

Technical Evangelist
Posts: 36
Registered: ‎07-12-2016

Re: Customizing Feature Analyser Panel

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

Frequent Contributor
Posts: 115
Registered: ‎04-05-2016

Re: Customizing Feature Analyser Panel

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!

Technical Evangelist
Posts: 36
Registered: ‎07-12-2016

Re: Customizing Feature Analyser Panel

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.

 

 

Technical Evangelist
Posts: 36
Registered: ‎07-12-2016

Re: Customizing Feature Analyser Panel

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.

Frequent Contributor
Posts: 115
Registered: ‎04-05-2016

Re: Customizing Feature Analyser Panel

Hi Robert,

 

yes some sample code would certainly be helpful.

 

Regards,

Sven

Frequent Contributor
Posts: 115
Registered: ‎04-05-2016

Re: Customizing Feature Analyser Panel

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.

Frequent Contributor
Posts: 115
Registered: ‎04-05-2016

Re: Customizing Feature Analyser Panel

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

Technical Evangelist
Posts: 36
Registered: ‎07-12-2016

Re: Customizing Feature Analyser Panel

 

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();
});

 

Technical Evangelist
Posts: 25
Registered: ‎05-12-2016

Re: Customizing Feature Analyser Panel

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

 

Do you need immediate support?
Please submit a Ticket through our
Development Ticket Portal.