There are times where dashboards have space constraints. Prompts, while essential to interactive applications, take a great deal of room. Usually the best way to handle this is to have all of the prompts on the side of the page. This, however, still leaves us with very little room for prompts. More than three or four and the user will need to scroll up and down just to select prompts.
To get around this many developers have asked for dropdown checkbox or select prompts. They want something to click on that will open hidden the prompt to allow them to select prompt values, with a mechanism to close it again, while not interfering with the layout and flow of the page. Just like all other simple requests, this is somewhat difficult to achieve.
Because I am a showoff, I didn’t stop there. Instead of instantly showing/hiding the prompt, I opted for a more elegant sliding animation. One that will encourage the user to use my BI teams services, instead of the services from that team across the hall. Additionally, I wanted to make it simple to use; a developer should need to use only one HTML item to build this.
The slider part is boring (because I didn’t write it first), so we’ll skip that with a brief description. It will take an element, with a set height or width and overflow set to hidden, and increment or decrement the size by the number of calculated number of pixels for every few milliseconds.
The function paulScripts.runPromptPopup takes two parameters, name and default message. The name is the name of the prompt. Remember, if you copy the prompt from the report page to a prompt page the name will change. The default message will appear in the label if nothing is selected. This allows you to inform the user that “All Years” will be selected if nothing is. It will wrap the prompt inside a new table, create a new textbox and attach all necessary events.
paulScripts.createInput is used to create the textbox for the prompt. The ID of this will be the name of the prompt, with “Label” added to the end.
The paulScripts.setLabel function will populate the label for the prompt . It will loop through all of the values and populate the newly created textbox as the label. If nothing is selected then it will send the default message to the textbox.
Next we have paulScripts.hideElement is the function which invoked the slider to hide the prompt. The interesting thing about this is that it is triggered after the user moves the mouse away from the prompt, but doesn’t actually send the command to hide it until after a moment. This allows the user to move the cursor back onto the prompt to cancel the hide.
Those functions, plus a few others, are included in an HTML item at the top of the page. I generally find it easier to dump all my functions into a single HTML item and give it the description “scripts”.
That brings us to the bit the developers need to remember:
paulScripts.runPromptPopup ('OrderMethod','All Order Methods');
And that’s it. Call the function, pass the name of the prompt and a message for when nothing is selected. It will take care of everything.