Translate

Wednesday, March 18, 2015

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
----------------------------------------------------

Sunday, March 15, 2015

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
    ----------------------------------------------------


Thursday, November 21, 2013

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