Translate

Sunday, November 29, 2015

Creating Custom Dashboard

Although there is already an example in Developer's guide on how to create custom dashboard, I have added small update to make it more useful and which may be required for some clients. The update is related to one of the question asked in community:

How to create a dashboard in WCS showing only those updated assets by an user in a particular site?

Meaning, if an user logins, he/she should see only those assets which were edited by him/her in past week for that particular site. Similarly, other users should see assets updated by them not the assets which were updated by others.

Creating dashboard and understanding its elements is crucial from Developer's guide: Chapter 64 before looking into the example.

I would be updating and explaining code for the last example mentioned in the section - "Adding a widget that shows recently modified assets".

As mentioned in guide, proceed with creating following elements:
1. CustomElements/UI/Layout/CenterPane/DashBoard/RecentlyModifiedAssetsAction.jsp
2. CustomElements/UI/Layout/CenterPane/DashBoard/RecentlyModifiedAssetsJson.jsp
3. CustomElements/UI/Layout/CenterPane/DashBoard/RecentlyModifiedAssetsHtml.jsp
4. CustomElements/UI/Layout/CenterPane/DashBoardContentsConfig.jsp

All these elements are available to download from edelivery.oracle.com. After downloading, these elements are present in the following folder: WebCenterSites_11.1.1.8.0/WCS_Sites/WCS_Sites/misc/Samples/UICustomization/sample_elements/dashboard_elements. 
For the 4th element (CustomElements/UI/Layout/CenterPane/DashBoardContentsConfig.jsp), copy the code from  UI/Layout/CenterPane/DashBoardContentsConfig.jsp and add the following change  just before </componets> tag is closed:
<component id="myrecentold">
      <name>Recently Modified Assets</name>
      <url>CustomElements/UI/Layout/CenterPane/DashBoard/RecentlyModifiedAssets</url>
      <height>300px</height>
      <closable>false</closable>
      <open>true</open>
      <dragRestriction>false</dragRestriction>
      <style>recentPortlet</style>
      <column>2</column>
</component>

Just copy and paste the code and do the following changes:
1. Edit RecentlyModifiedAssetsHtml.jsp and change the following line:

String storeUrl = GenericUtil.buildControllerURL("CustomElements/UI/Layout/CenterPane/DashBoard/RecentlyModifiedAssets", GenericUtil.JSON);

2. Edit RecentlyModifiedAssetsAction.jsp and replace the code within try block with the following:
// This element uses the search service to look for the assets modified in past week for the logged in site.
    // build search criteria
    SearchCriteria searchCriteria = new SearchCriteria();   
    searchCriteria.setSiteId(GenericUtil.getLoggedInSite(ics));   
    searchCriteria.setModifiedDateOption(SearchCriteria.DateOption.PASTWEEK);
   
    //call search service to get assets modified by logged in user since last week
    Session ses = SessionFactory.getSession();
    ServicesManager servicesManager =(ServicesManager)ses.getManager(ServicesManager.class.getName());
   
AssetDataManager mgr = (AssetDataManager) ses.getManager( AssetDataManager.class.getName() );
    SearchService searchService =  servicesManager.getSearchService();
    List<ResultRow> searchResults = searchService.search(searchCriteria, -1, null);
   
    // build the asset list, its a list of map   
    List<Map>  assets = new ArrayList<Map>();   
    for (ResultRow r : searchResults)
    {   
        Map asset = new HashMap();
        //this map will have, id, name, type and asset fields.
        String id  = r.getIndexData("id").getData();
        String type = r.getIndexData("AssetType").getData();
        AssetId assetId = new AssetIdImpl(type, Long.parseLong(id));
       
        //Check who updated the asset using Asset Manager
       
AssetData data = mgr.readAttributes( assetId, Collections.singletonList("updatedby") );
        String updatedby = data.getAttributeData( "updatedby" ).getData().toString();

       
        //if asset was updated by current user, add this asset to map
       
if(updatedby.equalsIgnoreCase(GenericUtil.getLoggedInUserName(ics))){
            asset.put("id", assetId.toString());
            asset.put("asset", assetId);
            asset.put("name", r.getIndexData("name").getData());       
            asset.put("type", r.getIndexData("AssetType").getData());
            assets.add(asset);
       
}
    }
    request.setAttribute("assets", assets);


Make the changes in ReqAuthConfig.xml file and then restart your server as changes were made in xml file. After restart, you should see your dashboard working.

Now, suppose you want to add other column rather than default one's (type and name), for e.g. Updated date rather than type, then get the updateddate's value and set it in request scope by adding it to asset.add() method in RecentlyModifiedAssetsAction.jsp and update javascript method: getSelectedAsset() in RecentlyModifiedAssetsHtml.jsp to include your other column as shown below:
// get the selected asset
asset = {
     "type": store.getValue(item, 'type'),
      "id": store.getValue(item, 'id'),
      "name": store.getValue(item, 'name'),
       "updateddate": store.getValue(item, 'updateddate'),           
};

and also pass the correct controller argument in the same above element as:
<controller:argument name="configName" value="CustomElements/UI/Layout/Utils/GridConfig"/>
and create the following element to include updateddate column:
CustomElements/UI/Layout/Utils/GridConfig

Add the column - updateddate and comment the type column.

All updated elements including updateddate related changes can be downloaded from here.

Futher improvements can be done like to show assets of a particular type and subtype only.

----------------------------------------------------
SUGGESTIONS/COMMENTS ARE INVITED
----------------------------------------------------


No comments: