Creating the dashboard user interface

You can create the dashboard user interface by creating the JSON object for the dashboard, getting the dashboard config, and rendering the dashboard config on the UI.

Procedure

  1. Create the JSON object for the dashboard and get the dashboard config.
    For example,
    
    String dashboardId  = "MyDashboard";
    JSONObject dashboardJSON;
    String ctx = request.getContextPath( );
    SCUIContext uiContext = SCUIContextHelper.getUIContext(request, response);
    Element dashboardEl =
    SCUIDashboardManager.getInstance( ).getUserDashboard(dashboardId, uiContext);
    if (dashboardEl == null) {
       throw new SCUIException("invalid dashbardID :" + dashboardId);
    }
    Element dasboardConfigEl = 
    SCUIDashboardManager.getInstance( ).getDashboardConfig(dashboardEl, uiContext);
    dashboardJSON = SCUIJSONUtils.getJSONObjectFromXML(dasboardConfigEl, uiContext);
    dashboardJSON = dashboardJSON.getJSONObject(dasboardConfigEl.getNodeName( )); 
    
  2. Render the dashboard config on to the UI.
    For example,
    
    <script type="text/javascript">
    sc.plat.JSLibManager.loadLibrary("scuiPlatDashboard", function( ) {
    Ext.onReady(function( ) {
    var config = <%=dashboardJSON.toString()%>;
    console.log('config is:', config);
    var dashboard = new sc.plat.ui.Dashboard(config);
    dashboard.render(Ext.getBody());
       });
    }); 
    </script>