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 7.6 – Adjustments and Considerations

{{Update 7/6/2015: 

The TextBox component is now a nested input element.  any javascript or CSS reference to a TextBox component will now need to be adjusted to fit the new HTML layout.  

.textbox {
  outline: none;
}
.textbox > input {
  outline: none;
}

var txtbx = document.getElementById(‘textbox’);
var txtbx = document.getElementById(‘textbox’).firstElementChild;
}}

After working with 7.6 for a few days, I’ve found a few bugs, as well as some differences in how the javascript is rendered in the new version.  I’ll also mention that the 7.6 virtual windows are completely different than the old infragistics stuff in 7.5; you’ll actually notice if you go looking for it, that the infragistics folder isn’t even there anymore.

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

Integrating Google’s Visualization API with Symantec Workflow – Part 2, Interaction

I posted an article back in October 2014 about integrating Google’s Visualization API with Symantec Workflow, but the pie chart wasn’t very interactive.  In this article, I’ll be going over how to code the chart so that we can talk to the chart and act on the represented data.

googlevisAPI2

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 – Disable Input Field Autocomplete (Google Chrome)

As I was presenting a project-in-development to a customer, the remark was made that “the suggested responses are going to be a problem, as this may be used on a community kiosk”.  I was presenting a self-service password reset project and demoing with Google Chrome.

So after a bit of looking around, I put together this bit of javascript code to disable the autocomplete suggestions in Chrome:


//remember to paste into notepad (or similar)
//before pasting into the Advanced Text Creator
//in Workflow in order to remove formatting from the text.

function DisableAutoComplete() {
var thisForm = document.getElementById('form1');
thisForm.setAttribute('autocomplete','off');
}

This is called at body onload like this:


DisableAutoComplete();

The feature we’re disabling is illustrated below.  It includes the dropdown list of values as well as the yellow background after one of the items is selected.

2015-01-20_19-46-02

Here’s a moving picture to demonstrate two different forms; one with autocomplete in its default state, and another with it disabled by our code above.

AutocompleteDisabled

Head over to the Demos page to find an example package.

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