[Update May 2018 - With the new VBCS there is a better approach for this - see this blog]
This entry is based on previous entries from John and Shray that deal with the same topic and provide the same type of solution. John's entry was created before VBCS provided the UI id for components, and Shray's entry is dealing with a more complex scenario that also involve fetching new data. So I figured I'll write my version here - mostly for my own future reference if I'll need to do this again.
The Goal is to show how you can modify the UI shown in a VBCS page in response to data changes in fields. For example how to hide or show a field based on the value of another field.
To do this, you need to hook into the HTML lifecycle of your VBCS page and subscribe to events in the UI. Then you code the changes you want to happen. Your gateway into manipulating/extending the HTML lifecycle in VBCS is the custom component available in the VBCS component palette. It provides a way to add your own HTML+JavaScript into an existing page.
The video below shows you the process (along with a couple of small mistakes along the route):
The basic steps to follow:
Find out the IDs of the business object field whose value changes you want to listen to. You'll also need to know the IDs of the UI component you want to manipulate - this is shown as the last piece of info in the property inspector when you click on a component.
Once you have those you'll add a custom component into your page, and look up the observable that relates to the business object used in the page. This can be picked up from the "Generated Page Model (read-only)" section of the custom component and it will look something like : EmpEntityDetailArchetype
Next you are going to add a listener to your custom component model. Add it after the lines
//the page view model this.pageViewModel = params.root;your code would look similar to this:
this._listener = this.pageViewModel.Observables.EmpEntityDetailArchetype.item.ref2Job.currentIDSingle.subscribe(function (value) { if (value === "2") { $("#pair-currency-32717").show(); } else { $("#pair-currency-32717").hide(); } }); CustomComponentViewModel.prototype.dispose = function () { this._listener.dispose(); };Where you will replace the following:
- EmpEntityDetailArchetype should be replaced with the observable for your page model.
- ref2Job should be replaced with the id of the column in the business object whose value you are monitoring.
- pair-currency-32717 should be replaced with the id of the UI component you want to modify. (in our case show/hide the component).
You can of course do more than just show/hide a field with this approach.
