Thumbnail search view customization

Although there is very detailed explanation on customizing search view in developer's guide; it provides example only to create thumbnail search view on basis of asset's attribute of type blob for docked thumbnail search view and undocked thumbnail search view. But what if you want to show blob attribute from asset's associated attribute? Thus, this post.

I have taken avisports site as an example. In avisports site, Article definition has attribute: relatedImage which is of type - AVIImage (subtype: ArticleImage) and thus, this assettype: AVIArticle qualifies for this customization. So overall, AVIImages's attribute: imageFile should be visible as thumbnail in docked and undocked search view on searching AVIArticle in Contributor UI.

Steps to follow:
1. Create a custom element: CustomGlobalThumbnailHtml under "CustomElements > avisports > AVIArticle > UI  > Layout > Search > View" as jsp
2. Copy the code from GlobalThumnailHtml.jsp from the element present under "UI  > Layout > Search > View" and paste in CustomGlobalThumbnailHtml file. This code is responsible for thumbnail view for AVIArticle as mentioned in ThumbnailViewConfig element under CustomElements.
3. Update CustomGlobalThumnailHtml and include following code after you get the type param, to fetch imageFile attribute and set it as url param and save it. This code will basically fetch AVIImage's imageFile attribute and set as url param.
4. Update ThumnailViewConfig element and DockedThumnailViewConfig element present under "CustomElements > avisports > AVIArticle > UI  > Layout > Search > View" to point to CustomGlobalThumbnail element.
5. Save and search any AVIArticle in your avisports, now thumbnails should be visible in thumbnail's view from imageFile attribute of asset - AVIImage.

Thus, in any project, thumbnail can be shown from associated asset's blob attribute in thumbnail search views (Docked and Undocked) with this simple customization.

To simply test it, I directly updated GlobalThumbnailHtml element which is not recommended.

AVIArticle Undocked Thumbnail View

AVIArticle Docked Thumbnail View

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

SUGGESTIONS/COMMENTS ARE INVITED

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

ALL TOPICS

Using PreUpdate or PostUpdate element for flex asset

In WebCenter Sites, whenever an asset is added/read/edited/deleted, many elements are called internally before an asset's CRUD operations are performed. These elements are stored under OpenMarket/Xcelerate/AssetType/[Your custom AssetType] folder.

Among the elements, PreUpdate and PostUpdate are called many times whenever any CRUD operations are performed on an asset. Hence, if any custom update is required either before or after an asset is saved in database, you can write your logic in PreUpdate element (before saving) or in PostUpdate element (after save).

Details related to which method should be updated is clearly mentioned in Developer's Guide. As not much detail is present in guide for any implementation or usage, I am discussing one very simple use case which is very common ask by any Client.

USE CASE:
If an asset is created in one site, it should be shared automatically with other sites. This is very practical and generic requirement for e.g. client may want to show News (all English ones) from all sites in other site's English version of News page or global site's News page.

Let us consider that there are 2 sites - FirstSite and FirstSite II, and both sites have product family and corresponding other child flex families. If a product asset of type - FSII Audio is created in FirstSite, it should be automatically shared with FirstSite II and vice-versa.

At first glance, this use case seems very easy and one can think of implementing a custom asset listener by updating the assetAdded method. But there is a catch; it seems that there is one bug that one cannot fetch asset subtype value using any method in asset listener while an asset is created and thus, cannot share only that asset whose type (definition) is FSII Audio. As asset is not saved in database at the time of call of asset listener, it does not have any way to retrieve asset's subtype value (or other custom attribute values) and hence, fails to meet the purpose. In such scenario, either you have to write flex filter or update that element which will be called just before an asset is shown in contributor UI after its created. How to develop flex filter is mentioned in detail in Developer's Guide, I have provided steps for updating core element method.

Elements while are called while CRUD operations for Product_C are located under "OpenMarket/Xcelerate/AssetType/Product_C/" folder. Create/Update element calls the PreUpdate and PostUpdate elements just before saving and after saving asset respectively. Hence, you can update one of the element to perform the task of sharing the asset. As we want to update asset based on subtype, PostUpdate element is most suitable option for this task as database entry has the subtype value present for the asset before PostUpdate element is called.

STEPS:

1. Internally, PostUpdate element for each AssetType folder calls the element: OpenMarket/Gator/FlexibleAsset/Common/PostUpdate. PostUpdate is xml file containing various checks on operations like create, delete, update, remotepost, etc. These operations are briefly defined in developer's guide.
2. If you are using Windows and have access to Sites Explorer, then navigate to the element and edit using desired text editor.
3. If you are using Mac or Linux, one cannot use Sites Explorer, so just create new CSElement with same name and the element code will be visible in the element tab.
4. In our case, need to add your code under "create" condition.
5. As writing code in XML can be difficult and cannot use any JAVA within XML, call your JSP element using <CALLELEMENT> tag under Variable.updatetype=create condition and write your logic in JSP element to share the asset.
6. You have the following ics variables available: AssetType as asset type and id as asset id, which can be used to find the subtype using <asset:getsubtype> tag and then this current asset can be shared using <asset:share> tag. You don't need to use <asset:save> tag.
7. Save your element and test by creating new asset. As soon as product asset of type FSIIAudio is saved, it will be shared to the sites according to your code.

CAVEATS:

1. As this is a type of customization, one has to keep track of such elements in event of upgrades in future and update accordingly after upgrade.
2. Always keep backup of original element before updating any core element as it may or may not behave as intended.
3. If an user has access to only one site say FirstSite and creates FSIIAudio product asset, it will be shared to FirstSite II also, according to our implementation. But if the same user wants to unshare/delete this asset, then he/she will not be able to do so as share function will not be accessible to unshare and/or then delete the asset. In such scenario, either you have to develop  custom unshare/delete button or user has to request the admin editor, who has access to all sites, to unshare/delete the asset. For creating custom button, you can check my post.

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

SUGGESTIONS/COMMENTS ARE INVITED

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

ALL TOPICS

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

Creating a custom tree tab

Tree tabs within WebCenter Sites (WCS) 11.1.1.8.0 can provide an idea on how a particular site is architected e.g. Design Elements, Content Parent Hierarchy and Custom Tree tab (if any). Furthermore, helps contributors and editors in creating and analyzing content easily. WCS provides in-built (default) tree tabs which are shared with each site but are visible provided that sufficient roles and ACLs are given to an user within WCS. This blog describes on how to create a custom tree tab.

Before jumping into this exercise, it is better to read about Tree Tabs from developer's guide.

Custom Tree Tabs can be build for both assets and non-assets. Developer’s guide includes code snippets to build custom tree tab node for a single asset and non-asset (adhoc). This section describes about how to build custom tree tab for non-assets; a simple tree tab with single node. This tree tab will be created from Admin tab which will point to our custom element which builds the tree tab. On double-clicking the node, another CSElement loads up which will simply process and show the content of CSElement. Hence, need to implement a custom view to show the contents and custom action for it.

Whole process can be broken into following steps:
1. Create one CSElement which will build the tree tab. I have considered creating tree tab

using XML as its easy to copy from other tree tabs elements; which ends up like this

2. Create another CSElement which will show the content on double-clicking on the node. In this example, I am using already available CSElement - OpenMarket/Demos/index which is present in JSK 11.1.1.8.0 installation. This CSElement needs to be passed while creating custom view as described in next point. 

3. Create custom element to implement custom view and custom action for the node. This requires little bit knowledge on how customization works in WCS which is described in Developer’s guide in full detail. Hence, proceed with creating one element under CustomElements for AviSports using Sites Explorer which should end up like the following: CustomElements/avisports/UI/Config/SiteConfigHtml which provides custom UI configuration settings. If this element is already present, then just add your code within it or else create this element and then add your code. First of all generate the URL using satellite:link in SiteConfigHtml element as shown (don’t forget to include the satellite tld):

<satellite:link pagename="OpenMarket/Demos/index" outstring="demoURL">             <satellite:argument name="contributorUI" value="true"/>
</satellite:link>

This demoURL variable will be passed while creating your custom view as show below:

config.views['sampleSitesView'] = { viewClass: 'fw.ui.view.SimpleView', viewParams: {
url: '<%= ics.GetVar("demoURL") %>' }
};

Create your custom action as shown below:

config.myActions = { sampleSitesAction: function () {
var views = SitesApp.getViews();
var view;
dojo.forEach(views, function (v) {
if (v.viewType === 'sampleSitesView') {
view = v; }
});
// view already opened - just focus it
if (view) {
view.focus();
}else{
// create view
view = fw.ui.ViewFactory.buildView('sampleSitesView'); view.set('title', 'Sample Sites');
view.show();

} } };

// Finally add action to tree

config.treeActions.SampleSitesAction = config.myActions.sampleSitesAction;

4. Finally, register your tree tab from Admin UI with AviSports site. Check developer’s guide on how to register custom tree tab.

Download sample files from here. 

To download summary of Tree Tabs, click here - TreeTabs

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

SUGGESTIONS/COMMENTS ARE INVITED

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

ALL TOPICS

Creating a simple custom WEM application

WEM - Web Experience management is a feature in webcenter sites/fatwire where in separate module can be implemented/deployed to integrate external content/repository via REST API or by deploying applications. All possible use of this feature are listed and discussed in detail here (Developer's Guide).

One feature is available to test and deploy: Articles Sample application (which can be downloaded  from Oracle edelivery site). Although following the steps given in guide should be enough, there are few errors and less info available for known issues. I am listing those so that you can make the changes and make it work:

1. SSO authentication failure (multi cast port not updated). Open the file: cas-cache.xml present at /WEB-INF/classes/cas-cache.xml and search for the term -"multicastGroupPort=@casCacheMultiCastGroupPort@" and change it to "multicastGroupPort=<SOME PORT NUMBER>". Re-deploy articles-1.0.war and run install.app

2. If you are not able to run install.app, then after deploying article-1.0.war file, register your app manually as mentioned here. There are few issues even after registering manually:

• Not able to find app icon: To resolve this either you keep the icon within /cs/ folder of your application server directory and update your FW_Application or else update your FW_Application icon url to "../articles-1.0/images/articles.png"
• Other issue is after each login on JSK, you have to run install.app and also there are multiple http redirects made leading to errors. To resolve this, rather than deploying the article-1.0.war file, unzip the folder under <APP_SERVER>/webapps/ folder and update your FW_Application accordingly. More details present here in oracle community. 

Although sample is present, it is little complex to understand it as it requires good knowledge on how controller works and creating app & assets programatically. But there is another simpler way to create and test WEM app. As a FatWire/Oracle Webcenter Sites consultant, often challenges are met with developing custom solutions which are useful for content contributors and administrators. For eg: Mass edit/save/update/delete/sharing assets, managing roles and ACLs, searching assets on attributes, etc. Such tools/solutions are often created as CSElement+SiteEntry where SiteEntry is called via browser to perform the task. If a project has so many custom requirements, I think it is better to have them separately in another WEM app which would be available to only permitted users. By doing so, custom admin tasks are separated from normal users and is secure as the solution is not exposed. I won't be telling you how to create these custom tools but rather about how to create a simple custom WEM app as followed:

Step 1: Create one typeless-template which should have the following code within the default code:

<div id="myapp" style="float:left;height:100%;width:100%" class="wemholder"></div>

This would be your layout element which would be included while creating FW_Application asset. Note: This id - myapp is important as it would be added to field: parent node while creating FW_View asset and should be unique.

Step 2: Create another typeless-template which will include your code to render the content. This content can come from anywhere like REST API, 3rd party api, etc. In our example, I will just include and proceed with Sample site URL present in JSK which shows the number of sites present and two sample sites urls to access sites: http://localhost:8080/cs/ContentServer?pagename=OpenMarket/Demos/index

This url would be added in the element while creating FW_View asset. 

Step 3: Download an icon (.gif or .png) from internet for your app and place it under some folder in <webapps>/cs/ folder

Step 4: Go to AdminSite, create new asset of Type: FW_View, fill in all the details like name, parent node (value would the id present in layout template i.e. myapp), view type: iframe and source url: sample site url. It should look like the following:

Step 5: After creating FW_View asset, add it to active list/bookmark it or it should be available in HISTORY tab if you did not navigate to other site or logged out. Create new FW_Application asset, include your FW_View asset and fill in all the details which should end like the following:

Step 6: Navigate to WEM Admin in AdminSite and register your app for avisports. Click on Apps from top menu and hover over you MyApp app, you will get 2 options: Edit and Manage App. Select Manage App, select site/s & role and then save it. I selected avisports and assigned all roles. Select site - avisports, an icon should be now visible for you to click on to open your WEM app. Overall you should see like below:

Similarly, any webcenter sites content or small functionality can be shown.

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

SUGGESTIONS/COMMENTS ARE INVITED

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

ALL TOPICS

UI Customization: Changing icons in FatWire/Oracle WebCenter Sites

This is just a simple UI customization which may or may not be required but just listing it down (mostly applies to Oracle WebCenter Sites 11g)

1. Changing login icon: Few Client may want to show their own logo while logging to Sites instance

Procedure:

• Just add all the image files under this folder - <webapps>/cs/js/fw/images/logos/
• Update login.css file placed under this folder - <webapps>/cas/fatwire/css/ to include your image name

2.  Changing Asset Type icon (Only applies to Oracle WebCenter Sites 11g): It is possible to show different icons on basis of asset types and definitions. For e.g. If you have media flex family and have 2-3 different asset type under it like video, image, audio, etc. Your client may ask to show icons which loads up everywhere like tree tabs in Admin UI, content tree in Contributor UI, etc. wherever this asset types shows up.

 Procedure:

• Download all the icons (recommended: 16x16 png)
• Place all the files under this folder with correct asset name:<App_Server>/webapps/cs/Xcelerate/OMTree/TreeImages/AssetTypes/<ASSET_TYPE>.png
• If your asset name is - "Content_A", your icon name should be Content_A.png placed under the folder mentioned above.
• For showing icon on definition basis(i.e. subtype): <App_Server>/webapps/cs/Xcelerate/OMTree/TreeImages/AssetTypes/<ASSET_TYPE>/<ASSET_TYPE>-<SUBTYPE>.png

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

SUGGESTIONS/COMMENTS ARE INVITED

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

ALL TOPICS

UI/Functionality Customization: Proxy Assets (Google Map)

After the introduction of Proxy Assets in Oracle WebCenter Sites 11.1.1.8.0, it has become easy to fetch data from external repository. As content is not stored in Sites (rather its present in the service provider database) there is no longer need for storing data or importing bulk content in Sites and later bothering with content storing, publishing and handling tell-tale errors (given that there is API for fetching data from third party repository which generates data on the fly).

Hence, the use of Proxy Assets opens up plethora of opportunities for implementation like:

• Use of Google Translator API (only paid version is available) to replace use of Dimensions (May be possible, not tried though)
• Use of Google Map API (free and paid, both available) to include Google Map on your site. Other maps like MapQuest, etc. can also be included if such API is available.
• Including location based weather information on your site (various free and paid version are available)
• Including NewsLetter (automatically get updated news on daily basis) from various News provider and target audience via Segments and Recommendation (Implemented and works perfectly)
• Including third-party search which rankes your web pages first (Note: Google no longer supports custom search API. Other search providers like Yahoo and Bing are open to use with either both free and/or paid version API)
• Google Youtube API to include youtube videos.

Proxy Asset follows the architecture:

Proxy Asset Architecture

Requirements for using Proxy Assets (Applies only to Oracle WebCenter Sites 11.1.1.8.0 and above):

1. You need to have service URL (API provided by third-party service) whose output on querying results in either JSON or XML(mainly these 2 because already there are jar present in webapps/cs/WEB-INF/lib folder to process them). Other outputs can also be handled, but will require deploying jar for them.
2.  You may or may not need a key to access these API (API can be public or from some organization; again depends on service provider)

Implemenation:
There is already an example present in JSK 11.1.1.8.0 for Youtube Proxy Assets and an excerpt in guide for static content. So I just thought to create my own example and ended up creating Google Map Proxy Asset.

For testing Youtube proxy assets, navigate to Contributor UI (avisports), select Youtube and search any video. The search result views are customized for Youtube proxy assets: List View and Thumbnail View. You can check the code under <Sites_Installation>/Shared/elements/CustomElements/Youtube folders where folder structure looks like this:

I will just summarize what each of them does:

1. Youtube/UI/Data/Search/SearchAction.jsp: This element is responsible for searching against third-party API on basis of keyword (keyword can be anything and depends on API, check the service provider API documentation) and gets JSON output and then registers the proxy assets (saves one unique key for later use)
2. Youtube/UI/Data/Search/SearchJson.jsp: Just stores the proxy asset
3. Youtube/Layout/CenterPane/Form/ProxyHtml.jsp: This element shows an invidual youtube proxy asset. It fetches the registered proxy asset, uses the stored unique key (externalid) and then uses the API to retrieve the data on the fly. This element is called when you click on any search results from either View (List or Thumbnail).
4. Rest of them are search view customization: Read about them here -> Customizing the Contributor Interface

Creating Proxy Assets for GoogleMap (ReverseGeoCoding) (AssetType name - "GoogleMap") :

1. Get a key (available free but with some limitations or the paid one). Details present here.
2. Just get any icon for GoogleMap (16x16 png file) and place it under <App_Server>/webapps/cs/Xcelerate/OMTree/TreeImages/AssetTypes/GoogleMap.png 

3. 

   
   
   
   

   Create one Proxy Asset Type from Admin Tab. In the Admin tab, expand Proxy Asset Manager and Double-click Add New.   
4. Open Sites Explorer and create folder structure under CustomElements (same as it was done for Youtube proxy asset but name would be assettype i.e. GoogleMap) which should end up like this:
   
5.  Create "SearchAction.jsp", "SearchJson.jsp" and "ProxyHtml.jsp" file under respective folder from SitesExplorer and save. Navigate to <Sites_Installation>/Shared/elements/CustomElements/ to see if there is a "GoogleMap" named folder created and the structure will be as shown above.
6. Copy the element code from SearchAction.jsp, SearchJson.jsp and ProxyHtml.jsp and paste it in respective elements.
7. Open ProxyHtml.jsp in some file editor and paste your Google Map key on line number 23. Just replace <USE YOUR OWN KEY> with GoogleMap key
8. Create new "search" start menu for GoogleMap proxy asset (Google Map location) and enable GoogleMap proxy asset for your site. I enabled it for AviSports.
   
   
   
   Select "Google Map Location" and search against any location. You may get one or more results. Click on any one of the result to view it, which should look this:
   
   
   
   
   
   Note: I am storing latitude, longitude and address in externalid so that when map loads up, I can use latitude and longitude for finding location on map (reverse geocoding) and address for dropping marker on the map.
   
   
   Furthermore, you can change search views, add custom tree tabs, add the proxy asset via insite editing to your assets, etc. All details are present in developer's guide and the templates for Youtube proxy asset. 
   
   
   
   
   ----------------------------------------------------

   SUGGESTIONS/COMMENTS ARE INVITED

   ----------------------------------------------------
   
   
   ALL TOPICS
   
   

WebCenter Sites / FatWire customizations - FULL LIST

Customization is fun. You achieve something which was never done by someone and you feel proud to share that you are the first one to do so. In my past few projects, I was able to do something like that and hence, I would like to share those.

This are all my personal views, findings and suggestions. These are not guidelines to meet you client expectations. Although if there is something you want to ask, I am ready to help.

As I move forward learning new things in Oracle WebCenter Sites and FatWire, I would like to share some brief idea/overview/illustrations about them. This blog contains full list of customization (be it UI and/or Functionality) which I know till date and will keep on sharing as I learn. 

FULL LISTING:

1. UI Customization: Changing icons in FatWire/Oracle WebCenter Sites 
2. UI Customization: Creating a simple custom WEM app 
3. UI Customization: Creating a custom tree tab
4. UI/Functionality Customization: PreUpdate/PostUpdate element
5. Functionality Customization: Creating custom Dashboard
6. Functionality Customization: Customize CKEditor Toolbar
7. UI Customization: Adding unbookmark context menu
8. Functionality Customization: Custom event for assets approval
9. UI Customization: Thumbnail Search View Customization
10. Functionality Customization: Creating a custom event listener 
11. Functionality Customization: Customizing workflow
12. UI/Functionality Customization: Creating custom button
13. UI Customization: Creating custom alert message
14. UI Customization: Adding unbookmark context menu
15. Functionality Customization: Automatic approval of assets 
16. UI/Functionality Customization: Proxy Assets (Google Map) 
17. UI/Functionality Customization: Gadgets

Do check my other blogs for more:  Sample Codes & FatWire/Oracle WebCenter Sites development