Input Range Sliders

I had a need for a “Duration” field, and liked the idea of (instead of using a masked textbox or two dates (start and end)) using range sliders to increment the duration parts of the value.

sliders

Continue reading

Workflow Form Element Transition and Animation Effects with CSS

Here’s a short post on how to achieve transition effects with CSS in your Workflow forms.  First, a couple of examples:

Symantec Workflow CSS Transtitions on Forms
This transition effect is based on the two states of the element having different opacities as well as height, width, and visibility.

Another:

Symantec Workflow CSS Transtitions on Forms
256-color .gif files don’t really help illustrate subtle color changes.

Continue reading

Sending a Javascript Event from an Iframe to its Parent

In this use case, I have a form with an embedded Iframe.  In the Iframe, I have a small webform that is continuously recycling to update the status of a patch staging/download task.

Symantec Workflow Patch Management Staging Status
The small panel cap at the bottom of the right column is an iframe component. The contents are a simple web form project that automatically recycles every few seconds in order to query the staging status.

Continue reading

Loading Page

While the Workflow Form Builder component has options for “processing” messages, I needed more flexibility with dynamic data.  The standard “Processing Message” field at the form level is a static text box:

Symantec Workflow Form Builder Processing Configuration
The standard Processing configuration for a form builder component.

2014-11-03_11-55-56

The individual fields available on the form buttons are static fields as well.

So with a little extra effort, we can use a few components on another intermediary form to show our loading message exactly how we want.

loader
Continue reading

Expanding/Collapsing Menus with CSS and Javascript in Workflow Forms

Here’s a gif illustration featuring a decent-looking expandable menu system for a form I’m working on.  Instead of trying to fit all the required fields into a single visible panel, I wanted the user to be able to view information on demand, and only have the pertinent asset info at the top of the element set.

Symantec Workflow Expanding/Collapsing Menus Concept
In order to make the user experience more fluid, I created an expandable/collapsible menu system from CSS classes and javascript onclick events.

Continue reading

Concepts Primer – Applying Custom CSS to Workflow Forms

By request — This should amount to a good starting point for using custom CSS code to style your Workflow forms.

Symantec Workflow ServiceDesk Login Form
An example of a standard ServiceDesk login form.
Symantec Workflow CSS Integration
Using CSS, we’re able to style the form elements to our heart’s content.

Continue reading

List Select – Alternating Row Colors

A while back on Symantec Connect, michael.george wrote about his preference of the ListSelect component over the Grid component (with which I wholeheartedly agree).  With some effort and practice, the ListSelect can be made not only visually more appealing than the Grid, but also functionally better.

Symantec Workflow Improved ListSelect
A CSS-seasoned ListSelect component.

Continue reading