Dynamically Hiding and Displaying UI Based on Object Values

Since ABCS is built on standard technologies like jQuery and Knockout, you can easily dip into code to enable dynamic hiding and displaying of components based on changes in the page data model. You just have to know how to get a reference to the model. This post shows you how to do just that.

Let say you are building an app to submit sessions to JavaOne or OOW. The page may look like this:

Fields are stored in Session BO and first field is Lookup named ref2Session with two values — OOW and J1 — and based on which value is selected the goal is to show/hide different sections of the page which end-user needs to fill-in.

To implement this add Custom Code into the page (location on page does not matter) and in its Property Inspector expand Generated Page Model section and locate definition of Observables — the variable name will be needed later to refer to value of the radio-box. In this instance the variable name is Observables.Session_EntityDetailArchetype:

var PageViewModel = function() {
// ....
self.Archetypes = {
Session_EntityDetailArchetype: archetypeFactory.create(self.Entities['Session_'], {
type: 'ENTITY_DETAIL',
id: 'Session_EntityDetailArchetype'
})
};

self.Observables = {
Session_EntityDetailArchetype: self.Archetypes.Session_EntityDetailArchetype.getObservables()
};

// ....
};

Next, expand Model section and add into the constructor CustomComponentViewModel function code like this:

//....
var CustomComponentViewModel = function (params, componentInfo) {
AbcsLib.checkThis(this);
this.params = params;
//....
this._listener = this.pageViewModel.Observables.Session_EntityDetailArchetype.
item.ref2Session.currentIDSingle.subscribe(function(value) {
if (value === "1") {
// Business div
$( "#panel-2057663409" ).hide();
// Technology div
$( "#panel--2035082722" ).show();
} else {
// Business div
$( "#panel-2057663409" ).show();
// Technology div
$( "#panel--2035082722" ).hide();
}
});
};
CustomComponentViewModel.prototype.dispose = function() {
this._listener.dispose();
};
//....

where:

  • this.pageViewModel is prefix to access Observables variable we identified earlier
  • Observables.Session_EntityDetailArchetype is the variable which refers to archetype’s observables
  • item.ref2Session is the way to reference observable with value of ref2Session property of Session entity. Holds currently selected value in the radiobox.
  • subscribe is listener function on value changes
  • panel-2057663409 is ID of div you want to hide or show (you need to Inspect the page in Chrome to identify ID value)

Make sure you properly dispose of the listener or your application will quickly start running out of memory!

Let say that you have a Session BO that has two Boolean properties: trackBusiness and trackTechnology. These two checkboxes which control visibility of Business and Technology sections. In this case, the custom code would look like:

//....
var CustomComponentViewModel = function (params, componentInfo) {
AbcsLib.checkThis(this);
this.params = params;
//....
this._listener2 = this.Observables.Session_EntityDetailArchetype.
item.trackBusiness.subscribe(function(value) {
if (value) {
// Business div
$( "#panel-2057663409" ).show();
} else {
// Business div
$( "#panel-2057663409" ).hide();
}
});
this._listener3 = this.Observables.Session_EntityDetailArchetype.
item.trackTechnology.subscribe(function(value) {
if (value) {
// Technology div
$( "#panel--2035082722" ).show();
} else {
// Technology div
$( "#panel--2035082722" ).hide();
}
});
};
CustomComponentViewModel.prototype.dispose = function() {
this._listener2.dispose();
this._listener3.dispose();
};
//....