Workflow, CSS, FOUC, and You

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

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

Concept Demo – ListSelect Filtering (Part Two)

{{7/16/2015 Workflow 7.6 update — review this update for new info on this post.}}

I was able to work a bit more logic into the ListSelect filtering concept I demonstrated in a previous post.  This time, I’m filtering based on both a standard TextBox as well as a CheckBoxList component.

listfilter2
I’m behind a bit on security patches.

Continue reading

Workflow Short – Position Forms at Y=Top, X=Center

The two settings Workflow provides for the position of your forms is handled here:

2015-01-12_18-33-25

Continue reading

Password Field CAPS LOCK Warning

{{7/16/2015 Workflow 7.6 update — review this update for new info on this post.}}

A few days ago I spent about 10 minutes researching why my AD credentials were busted, only to realize I had caps lock turned on.  I built this for people like myself who sometimes go moon-brained.

Here’s a quick how-to on adding a CAPS LOCK warning to your login forms.  If you’re using a modern version of IE, this feature will be built-in.  For any other modern browser, however, we’ll need to add one if we want it.

CAPSdemo

Continue reading

Live ListSelect Filtering with Javascript

{{7/16/2015 Workflow 7.6 update — review this update for new info on this post.}}

For a project I’m developing that involves interactive reports, I needed the ability to filter results based on user input.  I didn’t want to do the usual – type a value into a TextBox, click a “filter” or “search” Button and then have Workflow run a filter and reload the entire form with the new result set.

With the help of Google and a number of great reference articles, I was able to piece together a bit of Javascript that results in a very slick and seamless ListSelect filter.

listfilter

Continue reading

Highlight Element by CheckBox State

{{7/16/2015 Workflow 7.6 update — review this update for new info on this post.}}

In response to a post on Symantec Connect, I built a quick Workflow demo project to show how to use CSS and Javascript to highlight a required section panel when a CheckBox is checked.

highlightpaneldemo

Continue reading