Adding Color to Your Dynamic Tables in LiquidOffice

Applies To: LiquidOffice

In many of our LiquidOffice forms we use the dynamic table controls with row addition and removal turned on. You can see a sample on the left of a very simple form showing this behavior in Internet Explorer.  This works pretty well, but we recently had a seemingly simple request to change the color of the add (+) and remove (-) buttons.  There are several things you can customize in your form just by adjusting some properties, but the color of these buttons are not currently available as settings.

So what are our options?  We posed that question to Autonomy technical support and they came back with a couple of methods to get to these buttons in javascript and to set their color there.  We needed this behavior on multiple tables on the same form and on multiple forms so we put together a method using their help to come up with a pretty simple solution…

The heart of it is the following code:

//Sets the colors of the + and - buttons for dynamic tables
function ColorizeButtons(tableName){
  var tbl = CSForm.getTable(tableName);
  var addColor = "699A41";
  var remColor = "BF3834";
  if (tbl != null && tbl.isDynamic()) {
    if (tbl.isRowAdditionAllowed()) {
      var addButton = CSForm.getField("DFS__" + tableName + "_addRow");
      if (addButton != null) {
        addButton.setFillColor(addColor);
        addButton.setTextColor("FFFFFF");
      }
    }
    if (tbl.isRowRemovalAllowed()) {
      for(var i=0;i<=(tbl.getNumberOfRows()-1);i++) {
        var remButton = CSForm.getField("DFS__"+tableName+"_removeRow_"+ i);
        if (remButton != null) {
          remButton.setFillColor(remColor);
          remButton.setTextColor("FFFFFF");
        }
      }
    }
  }
}

To use this, open up the script editor in the Form Designer (Tools > Script Editor).  Expand your form and click on the <Client> node and paste the above code.  Then expand the<Client> node and then expand the CSForm node and double click the OnLoad() event to add the function.  In this event add a call to the above function for EACH dynamic table on your form where you want the buttons colored using the name of the table as the parameter (Our sample table is named GreatStuff).  For the test form we’re using our OnLoad event looks like this:

function CSForm_OnLoad()
{
  ColorizeButtons("GreatStuff");
}

Then for EACH dynamic table on your form find the table’s main node in the <Client> node on the right and expand it and double click the OnRowAdded() event and set the code like this:

function GreatStuff_OnRowAdded()
{
  ColorizeButtons("GreatStuff");
}

Your Script Editor should look similar to this:

Press F5 to save and compile.  That’s it.  Just test the form (File > Preview > As HTML) .  With most recent versions of Internet Explorer you will be prompted during the preview with a yellow message bar at the top of the page saying that it has restricted content from the page. This will only happen on your local machine and is a good, but annoying, security feature. Just click on the message and choose Allow Blocked Content… and all your scripts will run just fine.

Now your plus (+) buttons should be green and your minus (-) buttons should be red:

That’s all there is to it.  The buttons aren’t beautiful, but now they’re easier to see and the colors you choose can help indicate their function or match your logo.  To customize the colors used, just edit the ColorizeButtons function listed above with the hexadecimal color values in a string (without the #).  This is a pretty standard format found in HTML and you can easily find sites out there to help you with these.  A good and easy one is ColorPicker.com.  You can just adjust your colors right on the site and it gives you the hex value right at the top.  Just copy it and remove the #.

  var addColor = "699A41";
  var remColor = "BF3834";

To change the text color just edit the setTextColor(“”) calls using the same types of values (the code above uses white “FFFFFF”).

Let me know if you find this useful or if there are other tricks you use to help customize your forms.

Originally Published on WireBear.com/blog on November 26, 2010

Multiple Submit Buttons in LiquidOffice

Applies To: LiquidOffice

LiquidOffice is an enterprise forms processing and workflow suite from Cardiff (Now Autonomy).  It does some things very well (like routing forms), but it can be an incredibly frustrating piece of software for developers and designers.

Recently a client wanted to use LiquidOffice (v6.2.1) alongside a web service to provide a list of locations using a zip code and mile radius.  The requirements included the ability to return to a previous form and to change the zip code and/or mile radius.  Doing something like this in ASP.NET would be very easy and there are a ton of examples out there.  Doing this in LiquidOffice, however, presents quite a few challenges:

  • The LiquidOffice Web Service task is just awful
  • Populating a table from the process isn’t straightforward
  • By default you can have only one submit button on a form (although there is a list of actions which can have various values)
  • Navigating between forms isn’t intuitive either

The good news is that we got it working.  To try and help others that may be struggling with how to do some of these things we will present our solutions.

The LiquidOffice Web Service Task

We could probably write an entire post just about this alone, but instead we’ll show you how to work around some of the difficulties and get it working.

A couple of warnings though:
(all of these issues have been confirmed with Autonomy technical support)

  • The WS Task does NOT do authentication of any kind
  • The WS Task will NOT create complex objects
  • Once you have set a WS location and saved it, you can NEVER change it without recreating the task.  You can change it, save it and it will be reflected in the task properties, but it will continue to point to the previous WSDL.

Fortunately, there are work arounds to all of the above.  We didn’t need authentication for this particular web service.  We’ve needed it before (like when connecting to SharePoint), and we hope to cover how we overcame that obstacle in a future post.

We did however need a complex object.  In this case our locations were being returned in an array of location objects.  To get around this we created our own intermediate web service sitting on the LiquidOffice Process Server.  Calling this web service called the location service and wrapped those objects into a single string (very similar to JSON).  Then using a Script Task we parse out the string (using the split command) into an array and use it as a complex object again.

Populating the table should be done on the Form task and accessed using thisTask.getTable(“TableName”);  If you use the thisProcess.getTable(“TableName”); command you will have to find the internal name of the table.  This name is actually your table’s name plus a random number (I’m sure it’s not random but tech support could not tell us where it came from or guarantee it wouldn’t change).

Multiple Submit Buttons

For our form we needed a button that would return the user to the previous form, a button that would reload the list of locations, and of course a submit button.  These could all be accomplished by using the default submitaction control and using the form task properties to customize the Submit Action List.  Unfortunately, the end result on the form is not very user friendly.  It puts a combo box with the submit actions next to a button and the user is expected to choose their action and then hit the button.

You can, however, hide this control and use javascript attached to other buttons to simulate selecting an action and pressing the submitaction button.  To do this you still need to setup your Submit Actions.  For this form our Submit Actions look like this:

On the form we create three buttons (Back, Reload, and Submit) and use client side code to hide the submitaction control.  Here is our Javascript:

function CSForm_OnLoad()
{
  document.getElementById("DFS__ActionList").style.display = 'none';
  document.getElementById("DFS__GO").style.display = 'none';
}

function ReloadButton_OnButtonClick()
{
  CSForm.getField("SearchZipCode").setRequired(true);
  SubmitForm("Reload Locations");
}

function LocationSelected() {
  var locations = CSForm.getTable("Locations");
  for (var i=0;i<locations.getNumberOfRows();i++) {
    if (locations.getAt(i,"Selected").getValue()=="1") {
      return true;
    }
  }
  return false;
}

function SubmitButton_OnButtonClick()
{
  CSForm.getField("SearchZipCode").setRequired(false);
  if (LocationSelected()) {
    SubmitForm("Submit Choices");
  } else {
    CSClient.alert("You must choose at least 1 location!",0,1);
  }
}

function BackButton_OnButtonClick()
{
  SubmitForm("Back");
}

function SubmitForm(result) {
  document.body.style.cursor = 'wait';
  var choices = CSForm.getField("DFS__ActionList").getChoices();
  for(var i=0;i<choices.getCount();i++) {
    if (choices.getAt(i,true)==result) {
      document.getElementById("DFS__ActionList").selectedIndex = i;
      document.getElementById("DFS__GO").onclick();
      break;
    }
  }
}

Then in our process we add two loop objects so that it looks like this:

In the loop tasks we edit the Loop properties to set the Follow Path Based On section toAnother Task.  The Location Search Loop task looks like this:

The Task Output should match the submit action value from above.  The Navigation Loop is exactly the same except it’s Task Output value is set to -1.

So, yes it’s possible to do some complicated navigation in your forms and, yes, you can have multiple submit buttons.  It just takes a little work!

Originally Published on WireBear.com/blog on October 25, 2010