Transforming the Grid Picker

This is very much a work in progress, or rather a work just begun, but I thought I would share it anyway.

The other day, I was thinking about the way we implement server-side filtering in Request Offerings. The usual trick is to create an optional text field and then a query results prompt where the criteria includes the value of the text field. I was wondering if I could hijack these controls, and use them to create an autocomplete control, i.e. a text field in which the user starts entering some characters from the name of what they are looking for.

To test this, I built a form which is looking for two inputs: an author and a location. The current solution looks like this:
 


I decided to add two more prompts to the form to serve as markers which would tell me where to start building the new controls.
The Request Offering definition now looks like this:
 


Rendered in the portal this looks like:

 

Now all that remained was to add the custom javascript code to locate the markers, and hide them along with the text and grid controls. I then used the definition of each control to create a new Autocomplete control.

Here's what the original form looks like now. I hope you will agree that it looks a lot neater than the original.
 

Rather than simply show the Display Name in the drop down, I decided to join all the properties which had been selected in the query results control. For the author control, I selected the Display Name and Domain. Here's what it looks like in the picker:
 


You can add, remove or reorder these strings by modifying the display settings on the request offering prompt.

I could have created a template based on the selected columns and applied that, but I decided to keep it simple initially.

I have attached the custom code I used to generate these controls. It is not fully tested. In fact I have only run it in Chrome so far. I also have no idea how this will work on multi-page forms.

Some limits:
  1.  I have assumed that there will only be one token in the selection criteria. An autocomplete control will only provide a single input anyway, so it seems a reasonable assumption.
  2. The validation error is hidden. I should replicate or move the input to another part of the form, but I have not done that yet.
If you decide to try it out, I would love to hear how you get on with it. Remember this is just a first attempt and is not really ready to be implemented into production.

Installation:
Add the lines from the custom.js file to the custom.js file in the folder CiresonPortal\CustomSpace
Copy the file custom_ROAutocomplete.js to the same folder.
6
251 replies