Themes

Workflow, CSS, FOUC, and You

~ Andrew ~ Leave a comment

As long as I’ve been using CSS to apply styles to my Workflow forms, I’ve had to wrestle (pronounced “rassel” where I’m from) with the FOUC.  Here’s a snippet from Wikipedia about this problem:

A flash of unstyled content (FOUC) is an instance where a web page appears briefly with the browser’s default styles prior to loading an external CSS stylesheet, due to the web browser engine rendering the page before all information is retrieved. The page corrects itself as soon as the style rules are loaded and applied; however, the shift is quite visible and distracting.

Continue reading →

Workflow Short – Form Animation Samples

~ Andrew ~ 2 Comments

As an illustrated response to jdeleon7010’s post on the Connect forums here, this post will demonstrate some of the animations I’ve put together for various projects.

The original post:

Has anyone been able to create animated elements within workflow?  I am not looking for anything in particular, just trying to get more creative in our form designs.

So, here are some examples of how we can begin to improve the user experience a bit.  Some are “animations” in a true sense, while others are transition events.

Continue reading →

Workflow Short – Dynamically Size a Workflow Webform

~ Andrew ~ Leave a comment

Treat this entry as a proof-of-concept, as I just discovered it today, and haven’t thoroughly tested the potential or outcomes of this method.

Using javascript, we’re able to dynamically resize a form to provide more real-estate when required.

resizeform

Continue reading →

Expanding/Collapsing Menus with CSS and Javascript in Workflow Forms

~ Andrew ~ 6 Comments

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

~ Andrew ~ 7 Comments

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

~ Andrew ~ Leave a comment

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 →

Dynamic Button Position

~ Andrew ~ Leave a comment

For a specific project, I needed a button to be less… static.  Using javascript, css, and a little math, I was able to hack it.

Workflow Dynamic Buttons
The buttons move as the list is resized.

Continue reading →