Video Transcript:
SPK is the leading provider of custom dashboards and users interfaces for Electric Commander (now part of CloudBees CD). One of our most frequent requested customizations is for input screens featuring dynamically populated and responsive menu items. Rather than manually typing values into fields or requiring extensive knowledge of a particular system, users want to be presented with contextually aware input options that limit the user to only making valid selections.
Furthermore, they want the selections in one menu item in one menu item to change the available options in related fields; something that Commander is not able to do out of the box. First, lets look at a project that demonstrates the dynamic abilities of the user interface itself. This project was created for the purpose of controlling an external application from within Electric Commander. It required creating a special kind of widget for constructing parameters value out of predefined externally supplied options as well as a means of quickly searching through long lists of possible selections. When the plugin loads, it’s populated with procedures which have already been imported into the plugin. Since we’re logged in as the administrator, we can manage the available actions. The list that appears dynamically populated with projects and associated procedures visible to the current user. Selecting a procedure imports it into the plugin and updates the display. Now the imported procedure is available under the actions list, and we can see this parameters over on the right. Using the settings buttons, we can perform a couple of operations. First, we can reorganize the order in which the parameters are displayed. Using the plus and minus buttons, we can move a parameter up or down. So let’s move the parameter label dropdown from the bottom of the list to the top. Let’s also move the text field parameter up to that’s the second in the list. When we click ‘OK’, you can see the parameters are reordered and this order has been saved to the plugin’s configuration settings so that will always appear this way. The other thing we can do is change certain types of input fields into more specialized widgets. For this particular plugin, we gave drop-down selectors the ability to be turned into suggestion boxes, which narrowed down your possible selections as you type. And we gave regular text fields the ability to be turned into a completely custom input widget that we called a synergy project widget. It’s purpose is for assembling valid parameters to be passed to the customers IBM Rational Synergy system using a combination of predetermined, prefixes and suffixes and custom text. So as you can see the prefix field is a suggestion box and as we type, the list of available selections shrinks. And the same is true for the suffix field.
The title field in the center allows us to insert whatever text we like between the prefix and the suffix. The results in string updates as we make changes to any of these three top fields, but it can also be edited independently if we need to do so. Try to run the select procedure without filling all the required inputs produces a prompt and highlights the offending fields. If all inputs are valid, we are shown a quick summary of the procedure and parameters about to be executed and clicking ‘OK’ executes the procedure. As the procedure runs, the UI gives us information that the job status and reports back any error messages. And clicking on the link takes us to the job details page.
And finally, just as the administrator is able to import procedures into the plugin they can easily remove them as well.
Apart from creating custom input widgets, we also get requests for building interfaces that manage large sets of configuration properties, and the common feature of these interfaces is the ability for a selection in one field to modify the available selections in a dependent field. The following example demonstrates an interface that was created for managing large property heirarchies that were used as build configurations within Electric Commander. The first page within the plugin is used to create new build profiles. The user is able to select the project within which to create the profile, and then has the option of creating a new profile from scratch or by cloning an existing profile from within that project. Notice that as we select different profiles, the information on the right is instantly updated with that profile’s information. Using this plugin users are also able to execute builds based uoff of the created profiles. Notice how selecting different projects changes the options available. The manage build profiles page allows users to select a specific build profile and make modifications to it from within the plugin. Again, notice how the display updates itself dynamically without refreshing the page each time a new profile is selected. Within the context of this particular plugin, each build profile can have an arbitrary number of targets associated with it. The final screen we will look at allows the user to manage those targets and create new ones. As we have seen throughout the demonstration, the information in the panel updates based upon the selections made by the user. Noticed how changing the field label project name modifies the available selections in the procedure name field.
If your organization is in need of customization for your Electric Commander installation, or if you’re interested in learning more about our other services, please visit us at https://www.spkaa.com
