In many occasions we across scenarios where on a SharePoint screen we have multiple pickers and the result set of one picker should depend on what we select in the previous picker.
For e.g. let us consider the case of CRM Contacts entity that is delivered as part of the Duet Enterprise Feature Pack 1.0. In case of CRM Contacts, the region selected by a user would be directly related to the country selected by the user. Though we have validation in our backend system which will flag this as an error but the idea is to stop the user from entering this rather than showing him an error once he has filled up all the form fields and is trying to save the data.
With this scenario in mind we will design our cascading picker which will ask to first select a country and depending upon the country chosen it will populate the Regions (which we will showcase as a dropdown).
This blog would assume that you already know how to create a custom form and know your way around the BCS server side APIs.
The first step would be to build our custom forms. Once we have all the required formfields in place, we will go ahead and add the picker controls (Please bear in mind that since we are building a custom form we need to define the entire picker controls on the form not only the country & region picker which are under discussion here). For reference sample code can be found here.
Below screenshot shot shows how to add a picker control for the title picker.
Similarly, go ahead and add picker controls for Country and a drop down for Region as show below.
Please note that in each instance of Picker Control we have set the “OnInit” and “OnPreRender” event handler. We would try populating the data in the picker controls in the OnInit event and set data, if required, during the PreRender event.
Let’s see how it is done.
We need to define the “ExtendedData” property for each of the picker controls. This would be pointing to the external content type that we have for Title and Country respectively.
We will create a generic function that can help us fetch the property for any picker. The code line for the function is as bellows:
Now we are ready to initiate our picker controls so we would go ahead and define the OnInit event for both the picker controls as shown below:
Country::
Title::
PS:: We have set the postback property for the country picker to true because we want to refresh the region list every time a new country is chosen.
During, update we need to prepopulate the picker controls with the data that was is coming to us from the backend before presenting the form to the end user. For this we would use the PreRender event that we had defined earlier.
Let’s see how we achieve this.
The data coming to us would be the Title Id and Country Id which we need to resolve and show the description on the Picker controls. For this we would invoke the BCS API and fetch the details for the corresponding entry and then set the picker control with it as shown above.
Similarly for Country picker::
With this the hard part is over. Now all that we have to do is to fetch Region entries (via BCS invocation) filtered by the country chosen from the picker. The following code shows you how to do that which we will place in the PreRender event handler.
The last thing left now would be to collect the data entered on the form and fire a save event. The following code would let you do that. First we would override the “OnSaveHandler” for the form as shown below::
Then in our custom Save Handler we would read the various controls and populate the default formFields and let the save happen. The code for this is shown below::
With this we are done. To see how the various code pieces mentioned above fit together you can refer the same code available here.
Hope this helps.
Cheers
--Oyshik
- SAP Managed Tags:
