© 2008 RightNow Technologies, Inc. Dynamic Forms in Customer Portal Overview

© 2008 RightNow Technologies, Inc. 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

© 2008 RightNow Technologies, Inc. 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.

© 2008 RightNow Technologies, Inc. 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 Service Contract Section Input Field Widget Everything in the Service Contract Section is hidden unless a specific Org ID is identified when the ask a question page is loaded

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

© 2008 RightNow Technologies, Inc. How our Data Impacts Display Because the logged in customer has an affiliation with an Organization (42) we are displaying a Service Contracts section.

© 2008 RightNow Technologies, Inc. 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: The widget fields etc

© 2008 RightNow Technologies, Inc. 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 Hidden DIV Service Contract Section Input Field Widget Everything in the DIV is hidden until the button is clicked to toggle visibility Hide / Display

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

© 2008 RightNow Technologies, Inc. How our Activity Impacts Display After clicking on the hide display button – a section is dynamically displayed or hidden

© 2008 RightNow Technologies, Inc. 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 for the original example

© 2008 RightNow Technologies, Inc. Code for the example The button ‘event’ in the View: Hide /Display

© 2008 RightNow Technologies, Inc. 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( ) And this is our call: evt_menu_filter_get_update.subscribe(onProdCatUp date); SampleWidget Hidden DIV Service Contract Section Input Field Widget Everything in the DIV is hidden until a product menu selection is made Mobile Phones

© 2008 RightNow Technologies, Inc. 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); }

© 2008 RightNow Technologies, Inc. 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"; }

© 2008 RightNow Technologies, Inc. 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)

© 2008 RightNow Technologies, Inc. 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!

© 2008 RightNow Technologies, Inc. Questions? Join us on the Developer Community at: