UI/Functionality Customization: Creating custom button

Although there is an example present in developer's guide and the oracle tutorial here, there is not much of explanation on how one can use custom button in a live project.

Hence, I am providing a sample code for a simple use case by creating a button in Contributor UI which calls CSElement to validate if a particular asset is correctly created or not and show success/failure. Although use case discussed does not have much importance but the main purpose is to show how to hook up custom elements with WCS UI and assets.

Use Case: Page assets of specific subtype should have a particular category and if it has that category, then show success else failure.

For e.g. Product subtype page assets should have category as 'Detail Page' and Home subtype page assets as 'Info'

Procedure:
1. Create a simple Template (Element can be called from browser) and write the following code within <cs:ftcs> tag:

String type=request.getParameter("type");
String id=request.getParameter("id");

out.println("Type: " + type + " and id: " + id);

 
Current asset's type and id can be fetch from the request scope. Once you get the type and id, just add your logic and the output should be either some simple successful message or simple error message containing word - "Error:".

2. Create Custom Element under the following path - "CustomElements/[Site Name]/UI/Config/SiteConfigHtml" for a particular site or "CustomElements/UI/Config/SiteConfigHtml" for any site. I added to existing element: CustomElements/avisports/UI/Config/SiteConfigHtml in my JSK the following code:

webcenter.sites['${param.namespace}'] = function (config) { 
 // default view modes for avisports
 config.defaultView["Page"] = "web";
 config.defaultView["AVIArticle"] = "web";


  config.toolbarButtons.validatePage = {
   alt: 'Validate Page',
   title: 'Validate Page',
   src: 'js/fw/images/ui/ui/toolbarButton/smartlist.png',
   onClick: function () {
    // the document in the active tab
     var doc = SitesApp.getActiveDocument();
     // the asset object
       var asset = doc.get('asset');
       //asset id
       var id = asset.get('id');
       //asset type
    var type = asset.get('type');
 
      // make an ajax call to call an element
    dojo.xhrGet({
     //url of the element
     url: '/cs/ContentServer?pagename=avisports/ValidatePage',
     //force the browser to not cache 
     preventCache: true,
     //pass any parameters that need to be passed to the element 
     content:{'id':id,'type':type} 
    }).then(function(response){ 
     //handle response from the element here
     console.log('Response:', response);
     // the active view 
     view = SitesApp.getActiveView();
     if (response.indexOf('ERROR:') !=-1) {  
      view.error(response);
     } else {
      view.info(response);
     }
    },
    function(err){
     console.log('error on ajax call');
    });
   }
  }

  config.toolbars['form/Page/AVIHome'] = {
   'view': ['web-mode', 'edit', 'separator', 'preview', 'multi-device-preview', 'approve', 'delete','separator',
       'undocheckout', 'checkin', 'checkout', 'rollback', 'showversions','separator','validatePage','refresh'],
   'edit': config.toolbars.form.edit,
   'copy': config.toolbars.form.copy,
   'translate': config.toolbars.form.translate,
   'create': config.toolbars.form.create
  }
  
}

3. Once added,  just restart and you will see custom button like the following:

 

On click, you see the following screen with the success output which will stay on the screen for 2-3 seconds.

If it was error output, you will see the error output which will remain until you click on x button as shown below:

 

Trick is to show error via view.error([Your response]) which will stay until user clicks on x button and view.info([Your response]) which is visible just for 2-3 seconds.

Although this doesn't prevent from saving the asset but this custom button can be useful as secondary check like a post-save check if the asset was configured correctly as required or not. 

Another useful case: Suppose an user has access to only one site and on creation of asset, if an asset is automatically shared with other sites using some customization (Check out my post for this customization), he/she cannot unshare/delete this asset as user will get error that asset is shared and share function gets disabled if an user has access to only one site. Thus, a custom button can be helpful in such scenario; which can be built using same process discussed above. Basic steps would be: Get the asset type and id, share the asset to current site (current site id is available in session variable as pubid) using <asset:removesite> tag and then use <asset:void> and/or <asset:deletevoid> tag to delete the asset and show appropriate message.

There may be some other useful cases too which I shall discuss in my future posts.

----------------------------------------------------

SUGGESTIONS/COMMENTS ARE INVITED

----------------------------------------------------

ALL TOPICS