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

© 2008 RightNow Technologies, Inc.© 2008 RightNow Technologies, Inc.

Dynamic Forms in Customer Portal

Overview


This information is targeted at technical resources (specifically Developers) looking to build custom dynamic behaviors through the RightNow productTwo 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


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.


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


Data Driven Approach

Model ControllerData SourceData

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


How our Data Impacts Display

Because the logged in customer has an affiliation with an Organization (42) we are displaying a Service Contracts section.


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


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



Everything in the DIV is hidden until the button is clicked to toggle visibility

Hide / Display



ViewView Logic.jsLogic.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


How our Activity Impacts Display

After clicking on the hide display button – a section is dynamically displayed or hidden



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



The button ‘event’ in the View:

<button onclick="javascript:SampleWidget2('DynamicForm')" />Hide /Display</button>



Our second look at this problem is to use the Event Bus to listen for an event in another field within the formIn this example, we will do all of the work within logic.js to listen to the event and process itThe 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

Hidden DIV



Everything in the DIV is hidden until a product menu selection is made

Mobile Phones



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

}

}



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

}



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)


Summary

So, today we looked at three ways of building out custom dynamic form elementsAll the sample code for this exercise will be loaded onto our Developer Community ForumsIf 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!


Questions?

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

Documents

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