Dynamic Forms in Customer Portal

1. Dynamic Forms in Customer Portal Overview

2. This information is targeted at technical resources (specifically Developers) looking to build custom dynamic behaviors through the RightNow product Two approaches will be discussed: Data Driven presentation of form elements This section should only be displayed to customers with particular characteristics (a specific Org ID for example) Activity Driven – divided into two areas: This section of a form should only be displayed to customers on a click event (field, button events) - where we’ll manipulate the visible attributes of a DIV Listening to the Event Bus – displaying a dynamic area based on the selection of a value from an out of the box widget Overview

3. What We Will Not be Covering • Activities from a Custom Widget field selection • It will be a lot of work for a widget elsewhere on the page to ‘listen’ for a selection in a custom widget as custom widgets cannot ‘add’ to the event bus (pre- November ‘08) and won’t (for the foreseeable future) be able to add events specific to particular user actions on a HTML form (click, select, blur, focus etc). • To do this kind of work, if you cannot capture the click in your custom widget and need to listen to an event bus – be prepared to have to build your own event bus from scratch – this can be a considerable amount of low-level work.

4. Data Driven Approach • Our approach to building out sections that only appear based on data (in our system or another system) is primarily handled in the RNT Controller • The field that we want to make available upon a page load in our example is embedded in a custom widget (SampleWidget). This is what we refer to as a composite widget as the display and field widget to be exposed are ‘embedded’ within the same object . • Within the View, we decide what to show based on our values – in this case OrgID, which happens to be a profile value SampleWidget Everything in the Service Contract Section is hidden unless a specific Org ID is identified when the ask a question page is loaded Service Contract Section Input Field Widget

5. Data Driven Approach The view will control visibility - If the OrgId matches a particular value or range – expose your content Controller extracts the data from the Model or the $profile Data Source Model Controller View Profile Components of our custom widget In our solution – OrgId is a value in our persistent session profile – so we’ll use that rather than pull from the model

6. How our Data Impacts Display • Because the logged in customer has an affiliation with an Organization (42) we are displaying a Service Contracts section.

7. Code for the example • Our request for the data from the profile in the controller: $data['orgId'] = $this->CI->session->getProfileData('org_id'); • Our display of that data within the view: <?if($orgId == 42):?> The widget fields etc <?endif;?>

8. Activity Driven Approach /1 • Both of our approaches to building out dynamic sections that respond to user activity are focused around CSS – particularly the ability for CSS to control the visibility of DIV elements • For the first scenario, the field that we want to make available upon a user action is embedded in the widget that captures the ‘click’ (SampleWidget). • SampleWidget encases the visual properties wrapping the input field within a DIV id – which we have hidden by default in CSS SampleWidget Everything in the DIV is hidden until the button is clicked to toggle visibility Hide / Display Hidden DIV Service Contract Section Input Field Widget

9. Activity Driven Approach /1 Manipulate the CSS to toggle display or visibility settings of other elements Capture the activity (button click, menu select etc) View Logic.js Components of the custom widget

10. How our Activity Impacts Display • After clicking on the hide display button – a section is dynamically displayed or hidden

11. Code for the example • Our code in the CSS: div#DynamicForm { margin: 0px 0px 0px 0px; display:none; } • Our logic in the Javascript: function SampleWidget2(data) { //Data object contains all widget attributes, values, etc. var elem, vis; this.init = function() { //Perform any initial javascript logic here } if( document.getElementById ) // this is the way the standards work elem = document.getElementById( data ); else if( document.all ) // this is the way old msie versions work elem = document.all[data]; else if( document.layers ) // this is the way nn4 works elem = document.layers[data]; vis = elem.style; // if the style.display value is blank we try to figure it out here if(vis.display==''&&elem.offsetWidth!=undefined&&elem.offsetHeight!=undefined) vis.display = (elem.offsetWidth!=0&&elem.offsetHeight!=0)?'block':'none'; vis.display = (vis.display==''||vis.display=='block')?'none':'block'; } See http://www.netlobo.com/div_hiding.html for the original example

12. Code for the example • The button ‘event’ in the View: <button onclick="javascript:SampleWidget2('DynamicForm')" />Hide /Display</button>

13. Activity Driven Approach /2 • Our second look at this problem is to use the Event Bus to listen for an event in another field within the form • In this example, we will do all of the work within logic.js to listen to the event and process it • The format of the event is the following: evt_menu_filter_get_update.subscribe(<function>) • And this is our call: evt_menu_filter_get_update.subscribe(onProdCatUpdate); SampleWidget Everything in the DIV is hidden until a product menu selection is made Mobile Phones Hidden DIV Service Contract Section Input Field Widget

14. Activity Driven Approach /2 • The function we are calling from is within the init function for the widget listening for the event: function SampleWidget(data) { //Data object contains all widget attributes, values, etc. this.init = function() { //Perform any initial javascript logic here evt_menu_filter_get_update.subscribe(onProdCatUpdate); } }

15. Activity Driven Approach /2 • The function changing the visibility of the CSS element is the following: function onProdCatUpdate(type, args) { var evtObj = args[0]; if(evtObj.data.value == "1") document.getElementById("DynamicForm").style.display = "block"; else document.getElementById("DynamicForm").style.display = "none"; }

16. Activity Driven Approach /2 • And the results are the following – the ID value of Mobile Phones is 1 – and as a result – the section is flipped • Selecting another value from the menu – or hitting the hide / display will toggle the visible area (either hiding or displaying)

17. Summary • So, today we looked at three ways of building out custom dynamic form elements • All the sample code for this exercise will be loaded onto our Developer Community Forums • If you found this simple tutorial helpful, let us know via our Developer Community forums. Also let us know what other tutorials you would like to see in the future!

18. Questions? Join us on the Developer Community at: http://devforum.rightnow.com/rightnowdev/