Workflow Short – Dynamically Size a Workflow Webform

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

At first glance, it seems that the reference element for which we are altering the height is “tableMain”.  It also seems that any positioning of elements on the form (the OK button, for instance) must be offset in value by the “Top border height” of the theme’s top border.  For example: the theme above has a top border height of 150, so the “Reset” event subtracts 150 from the designer “top” value of 144, and ends up using “-6px” in the javascript to reset the position.  If no theme is being used, the normal designer value can be used in the javascript.

Example code (onclick event for the Reset button above):


document.getElementById('tableMain').style.height= "200px";
var okButton = document.getElementById('OKButton');
okButton.style.top = "-6px";

Example code (onclick event for the Expand button above):


var docElem = document.getElementById('tableMain');
var okButton = document.getElementById('OKButton');
docElem.style.height = parseInt(docElem.style.height) + 50;
okButton.style.top = parseInt(okButton.style.top) + 50;

There’s also a body onload event, because initially, the “tableMain” element is getting its height value from its css class, so we need to inline it so we can easily alter it with javascript.


var docElem = document.getElementById('tableMain');
docElem.style.height = "200px";

I welcome feedback and ideas on how this could be put to practical use.  Obviously, there’s little reason to have a couple of buttons that expand the form or reset it, so I’m sure the better use case for this would be for evaluating the length of a list select component, for example, and pushing the bottom of the form down some so that the form scrolls instead of the list element.  Another use case would be expanding the form height to make room for a conditional panel that’s controlled by a checkbox.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s