This is a continuation from my previous post – Developing WebCenter Content Cross Platform iDoc Enabled Components for Mobile, ADF, Sharepoint, Liferay.

You can see a video of JIVE Forums integration with a JS Taskflows vs ADF Taskflow running in WebCenter Portal here –

Click here for hi-resolution

This post is aimed at Web Developers, Designers and Marketing web teams who aren’t familiar with ADF and want to create reusable dynamic taskflows without the need to learn ADF or Java to provide interactive dynamic regions using Javascript, HTML and CSS with custom frameworks like jQuery designed not to conflict with ADF JS environment. Read on for a step by step run through on creating JS driven taskflows  –

1. 1. You will need to download JDeveloper – I’m using JDev 11.1.1.7.0 for WebCenter Portal 11g where I will deploy my custom taskflow driven entirely with Javascript.
   2. Run through the following Oracle guide to setup your project to extend Portal (11.1.1.8.3) – Developing Components for WebCenter Portal Using JDeveloper
   3. Add new taskflow to library by right-clicking WebCenterSpacesExtensions and selecting “New…”
   4. Add ADF Task Flow (JSF) . .
   5. Name the xml file, leaving the Directory the JDev default . .
   6. Double click the new xml file and drag a View element into the diagram from the Component Palette . .
   7. Rename “view1” to “[taskflow name]View”.
   8. Double click the new view to create a page fragment. Update the directory and add \taskflows\[taskflow name]\view This will make it easier to sort through in the future when you develop more taskflows. . .
   9. Edit the JSFF and display code in source view. . .
   10. Replace with the following –

       <?xml version='1.0' encoding='UTF-8'?>
       <jsp:root xmlns:jsp="http://java.sun.com/JSP/Page" version="2.1"
                 xmlns:af="http://xmlns.oracle.com/adf/faces/rich"
                 xmlns:f="http://java.sun.com/jsf/core">
       <af:resource type="javascript">
       <![CDATA[
       /**
        * CREATE BASE JS CONTAINER OBJ
        * This is base class to assist PSA javascript methods to init after page loaded.
        * You can add this script in the head of you template instead of the portlet.
        */
       var FB = window.FB || {},
       	Base = Base || (function() {
       		return {
       			//create multi-cast delegate.
       			onPortalInit: function(function1, function2) {
       				return function() {
       					if (function1) {
       						function1();
       					}
       					if (function2) {
       						function2();
       					}
       				}
       			},
       			//used for chaining methods
       			chainPSA: function() {}
       		}
       	})();
       
       //Use Base method if FB.Base hasn't been created
       FB.Base = FB.Base || Base;
       /************************/
       
       
       
       
       /**
        * CREATE CHAIN WRAPPER
        * Chain method will initialise from Base requirejs core script
        */
       FB.Base.chainPSA = FB.Base.onPortalInit(FB.Base.chainPSA, function() {
       	//set base mustache template name to load and inject
       	var vUID = 'FB_sampleContainer_${pageFlowScope.containerID}', //(UID) Unique Classname to inject template into - can't use IDs in portal
       		oConstructor = {
       			vTemplate: 		'import/tpl/sampleTpl', //location of sampleTpl.mustache to load
       			oParams: { //Obj list of default params pulled from sample.xml Input definition
       				title:			'${pageFlowScope.title}',
       				displayTitle: 	'${pageFlowScope.displayTitle}',
       				activeUser: 	'${pageFlowScope.activeUser}'
       			},
       			containerID: 		vUID
       		};
       
       	//check if array exists from other custom JS Portlets
       	if (typeof(FB.loadTemplate) === 'object') {
       		FB.loadTemplate.portletUIDList.push(vUID);
       	//create empty object
       	} else {
       		FB.loadTemplate = {
       			portletUIDList:[vUID],
       			portlets: {}
       		};
       	}
       
       	//inject params
       	FB.loadTemplate.portlets[vUID] = oConstructor;
       
       });
       /************************/
       ]]>
       </af:resource>
       
       
       <!-- Sample template will be injected here -->
       <af:panelGroupLayout layout="vertical" id="FB-SampleContainer" styleClass="FB_sampleContainer_#{pageFlowScope.containerID} portlet-sampleContainer"></af:panelGroupLayout>
       <!-- xSample template will be injected here -->
       
       
       </jsp:root>
       

       OVERVIEW: This is where the mustache template will be injected into to provide the sample component functionality.

   11. <af:panelGroupLayout layout="vertical" id="FB-SampleContainer" styleClass="FB_sampleContainer_#{pageFlowScope.containerID} portlet-sampleContainer"></af:panelGroupLayout>

       The oConstructor specifies the configuration of the the component to inject. vTemplate points to a JS file that requireJS imports and configures the base multiUploader components from the params defined. oParams contains all configuration for the App at the moment these are scoped params associated with the taskflow that you can allow the user to define and use within you sample component as a JS var.

       var vUID = 'FB_sampleContainer_${pageFlowScope.containerID}', //(UID) Unique Classname to inject template into - can't use IDs in portal
       		oConstructor = {
       			vTemplate: 		'import/tpl/sampleTpl', //location of sampleTpl.mustache to load
       			oParams: { //Obj list of default params pulled from sample.xml Input definition
       				title:			'${pageFlowScope.title}',
       				displayTitle: 	'${pageFlowScope.displayTitle}',
       				activeUser: 	'${pageFlowScope.activeUser}'
       			},
       			containerID: 		vUID
       		};

       A simple check to see if other components exist on the page and append the new component within the JS Array “PortletUIDList” associated with a JS Object holding the component params in “portlets”

       	//check if array exists from other custom JS Portlets
       	if (typeof(FB.loadTemplate) === 'object') {
       		FB.loadTemplate.portletUIDList.push(vUID);
       	//create empty object
       	} else {
       		FB.loadTemplate = {
       			portletUIDList:[vUID],
       			portlets: {}
       		};
       	}
       
       	//inject params
       	FB.loadTemplate.portlets[vUID] = oConstructor;

       Finally the JS configuration is wrapped in JS chain wrapper that will only initialise when requireJS has loaded in all its core base libraries like Jquery etc.

       FB.Base.chainPSA = FB.Base.onPortalInit(FB.Base.chainPSA, function() {
       
       //code
       
       });

       Make sure within your ADF Template you have setup requirejs core and have the following to initialise the FB.Base.chainPSA and loop through the custom taskflows to display on the page –

       //load JS Components
       		if (FB.Base.chainPSA) {
       			FB.Base.chainPSA();
       		}

       //loop and request all templates required
       			for (x;x<lPortletList;x++) {
       				var vPortletUID 	= aPortletList[x],
       					oPortlet 		= FB.loadTemplate.portlets[vPortletUID];
       
       				//define temp object info to pass into script when init
       				define('temp'+x, oPortlet);
       
       				//request and initialise portlet template & pass params
       				require([oPortlet.vTemplate,'temp'+x], function(tpl,oPortlet) {
       					console.log('[IMPORTED TEMPLATE]',tpl.component,oPortlet);
       					tpl.init(oPortlet);
       				});
       			}

   12. To add taskflow parameters open the xml file again.
   13. Select Overview tab bottom left of the screen. Select the Parameters side tab. Add the following four example params – . You will see these when we add and edit the taskflow to a portal page in WebCenter Composer.
   14. Deploy the taskflow to WebCenter Portal following the last steps in the Oracle GuideOnce the new taskflow / spaces extension project has been deployed load WebCenter Portal. The following screenshots from PS5 the UI has changed since PS7 but you should be able to work out the differences.

1. 1. Go into administration area of the portal and select the “Resources” Tab
   2. Select the “Resource Catalogs” from the items on the left under the “Structure” heading. A list of Resource Catalogs will be available. You can create a new one or use an existing one. Make sure the one you are updating is the one being used by the portal you want to add the taskflow into. . .
   3. Select the resource catalogue and Edit from the Edit Menu drop down down. . .
   4. A window will appear hear you can add folders and where you want your components to appear. I have created a Demo Taskflow folder.
   5. Select “Add From Library” from the Add dropdown menu. . .
   6. Drill into Taskflows and add your [Taskflow] – I am adding the sample taskflow I created earlier.
   7. Go into your portal create a new page and add the new taskflow. Here is an example of the Jive Forums that I recreated as a JS driven taskflow. . . .
   8. And the final output of the taskflow on the page.