Translate

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


No comments: