Understanding Borders and Margins in Flowed Layouts
Flowed Layouts
At Avoka, we’re big fans of flowed layouts in Designer. There are a number of reasons for this, some fairly obvious, others less so:
- If you’re going to use features such as repeatable sections, expanding tables, or hide/show logic, you have to use flowed layouts – as the expanding sections grow, the sections below flow down the page. If you don’t use flowed layouts, the expanded sections will just flow over the top of the ones already there.
- In many ways, using a flowed layout is a much more maintainable way to build a form. If you use positioned layouts, and need to insert a new field somewhere in the form, you need to re-adjust all the fields below to accomodate the new field. However, if you’re using flowed layouts, all the fields below will simply shift down, and there’s nothing extra to do.
- Flowed layouts take away a lot of the pain of lining fields up. In a positioned layout, you need to use snap-to grids, rulers, explicit x/y coordinates, in order to get fields lined up. In flowed layouts, you just drop the fields into a flowed sub-form, and they will all automatically line up.
Unfortunately, flowed layouts can be a little difficult to get your head around. With a positioned layout, you can simply drop a field on a form, resize it, and drag it to wherever you want. With a flowed layout, Reader takes care of a lot of the positioning for you, so you sometimes have to use some tricks to get the layout that you want.
This article talks about some of the difficulties with flowed layouts, as well as showing some of the tricks we use to get things looking the way you want them.
A heading with a thick underline
Here is a basic heading as we might insert it into a XFA form. It consists of a subform, and a heading text object within the subform. We’ve put two versions of the same heading into a vertically flowed layout.
The yellow background and the blue/red border are there just to show where the different subforms start and stop.
Let’s imagine we want to add a solid line below the heading, creating an underline effect. There are several ways to achieve this, including adding a line object, or adding a separate subform with a background color. In this case, we’re going to achieve the effect by adding a bottom border to the object. For the sake of illustration, we’re going to add an 4mm border, which is probably a bit larger than you would normally want – but it helps to show what’s going on.
Once we add the border, we get a form that looks like this:
This is really interesting. What we see is that the border doesn’t increase the size of the subform – the border actually overlays both the subform above and below. With a very thin border, this is usually unnoticable, but with a thick border like this, this causes the border to overlay the text both above and below.
There is actually a very good reason that Reader paints half the border above and half below – it means that if you have two text fields, for example, both with borders, immediately above and below each other – both borders will overlap, and you’ll only get a single width border, rather than an ugly double width border.For example, here are two rectangles with 1mm borders in a flowed layout:
As you can see, despite they fact that there are actually two borders at the boundary, because they each overlap half up and half down, the effect is a single width line.
But this isn’t quite what we want in this case.
Let’s add a background fill to the lower subform. This results in the following:
From this we can see that Reader “paints” the subforms in a particular order. First the top subform, then the border, then the lower sub-form. The painting of the lower subform overlays the border. This doesn’t solve our problem, because we only have a 2mm border.
In order to fix this, the first thing we need to do is add a bottom margin to the top subform. Adding a margin does increase the size of the subform. It also instructs Reader to not lay out any fields within the margin area, thus ensuring that the text object will not be overwritten. We need to make the height of the margin one half of the height of the border (or greater), since only half the border is painted in the upper subform. The margin settings are shown below:
This results in the following:
We’ve eliminated the overflow on the upper subform. Now we need to get rid of the overflow on the lower sub-form. One way to do this would be to add an upper margin on the lower subform. However, this puts a requirement on whatever element we put below the heading to implement the upper margin. It would be much better if we could solve the problem purely within the upper subform itself. The way to do this is to wrap the upper subform in another subform (right click in Designer and select “Wrap in Subform”), and then add another 2mm margin to that subform.
The nested subforms are shown here:
This finally gives us the result we want – a 4mm bottom border without any overlays.
.
Conclusion
While this has been a slightly contrived example, we hope that it illustrates some of the subtleties of borders and margins in LiveCycle Designer and Reader. This also serves as a useful technique for achieving thicker borders in flowed layouts.
Setting a User Task Deadline – Based on Form Data: LiveCycle Tips and Tricks
LiveCycle User Assign Tasks have a neat User Interface for settings deadlines. Setting it up with a timeout and a route to follow after the deadline has elapsed is all done graphically. It is well documented and pretty easy to follow.
Recently a customer came to me, asking to deadline a User Assign Task – based on a date in the form. I said yes I can do it. I knew that LiveCycle supports Literal (read Graphical) and Variable (read code) configuration for every component and there were over 80 data types in LCES 8.2.
Setting a deadline for an Assign Task during process runtime is not obvious. The Deadline section can take an XPath expression (see below) to something but the magic question is what XPath expression?
It’s not well documented but there is a built-in LiveCycle type made exactly for this purpose – called TaskDeadline.
Once you declare a variable of that type you can basically set it to do anything you want. Here are the XPath settings I used in a Set Value task for configuring the Task Deadline dynamically.
| /process_data/deadlineVar/object/@selectedRoute | ‘Deadlined’ |
| /process_data/@deadlineDate | /process_data/xfaForm/object/data/xdp/datasets/data/myform/deadlinedate |
| /process_data/@iDays | get-days-from-date-difference( /process_data/@deadlineDate , format-dateTime-withFormat( current-date() , ‘yyyy-MM-dd’ ) ) |
| /process_data/deadlineVar/object/dateObj/@days | /process_data/@iDays + 1 |
| /process_data/deadlineVar/object/@omitDeadlineRouteFromUser | 1 |
Note that the Selected Route is configurable, and a button showing that route can be omitted from the Workspace chrome with the expression in the last assignment.
What’s new in LiveCycle Designer ES2?
Adobe has recently released LiveCycle ES2 – the second major update to their enterpise suite. This blog takes a look at what is new for PDF form developers and designers.
What is LiveCycle Designer?
LiveCycle Designer is the Adobe tool for building PDF forms.
Hang on a minute, can’t you do that with Acrobat? Yes, you can create simple forms by over-laying fields onto a PDF with Acrobat. You use Designer when you get serious about forms and want to provide your users with the best experience possible. Designer provides enhanced form functionality, including:
- Streamlined workflow; create content and form elements in a single tool. Content changes can be performed without having to re-apply form elements, such as accessibility tags
- Dynamic content; forms that personalise their content to the user and guide them through the data capture process. This is implemented with content show/hide and repeating sections
- Data connections; bind fields to external data sources for easier integration with other systems. Data structures are protected from changes to form layout
- Reuse; fragments, common objects and templates allow content to be reused across multiple forms
LiveCycle Designer is a Windows application that can be purchased on its own or comes bundled with Acrobat Pro and LiveCycle Workbench. The bundled version is automatically opened by its parent application when needed or can be opened stand-alone by running FormDesigner.exe
New features in Designer ES2
The most significant change to Designer is the removal of the Form Guide Builder. LiveCycle Guides are now built in Workbench and no longer require a base XDP file. There will be more on this in upcoming blogs.
There is minimal over-head in migrating to Designer ES2 due to very little change in the workflow of building PDF forms. What Adobe have given us in this release is additional features for making it easier to produce high quality forms. Form designers and developers can now be more productive than ever.
Please note that the minimum versions of Reader/Acrobat that you must support will determine which of these features are available to you. Contact Avoka if you need further information.
Action Builder
A common theme in my training courses and client engagements has been that form designers want to realise the benefits from the smart features of PDF forms without having to get too deep into coding.
Designer ES2 introduces Action Builder – a simple wizard interface for building useful, common behaviours with no coding, including showing/hiding an object, attaching a file, displaying a message box and perhaps the most useful of all – adding and removing repeating sections and table rows.
Clearly, a lot of thought has gone into Action Builder. It is surprisingly forgiving. It manages the code so that it continues to work even when you move and rename fields and works happily alongside custom code. It even handles the case when its generated code is changed.
Early indications are that this will be useful for experienced developers as well as designers and novice developers. It provides a useful starting point for advanced features, such as clearing the fields in the last row to be deleted in a dynamic table.
Error Messaging
A common requirement from clients is to enhance the default error messaging provided by Acrobat/Reader. In fact, it is so common that Avoka has invested a significant amount of time in building a sophisticated errors framework for our clients’ forms.
Designer ES2 enhances the default behaviour by providing additional messaging handling options. Without coding, the form designer can configure:
- The behaviour of error message boxes
- How to highlight fields that fail validation
- How to highlight mandatory fields that are left empty
- Whether to set focus to the first field that fails validation
An interesting feature of this, is that it provides real-time validation. For instance, if you have configured the background colour of fields to turn red on failed validation, this will occur as soon as you exit an invalid field. Historically, this was difficult to achieve as it meant putting code on every field. This has been made simple in ES2 by the introduction of the next feature – event propogation.
Event Propogation
It is common to want a group of fields in a form to exhibit the same behaviour. For instance, you may want to strip leading and trailing spaces from text as it is entered into your form.
Designer provides several ways to do this when you are first building a form, including using pre-coded common objects. However, it was difficult to maintain as any change would typically require changing code on multiple objects.
Event propogation makes this much easier by allowing code on an a container to be inherited by every object within that container. I could write my space stripping code in the exit event of a top level subform, turn on event propogation and have all text fields immediately start stripping text.
A nice feature of this is that it is accumulative; an object will execute the code it inherits from every one of its containers that propogate events in addition to any code that is written directly on its events.
Data Connection to Adobe Data Model
LiveCycle ES2 introduced the Adobe Data Model to make it easier to share data resources across applications, including LiveCycle guides and processes. Data from an ES2 Data Model can be displayed in a static form by using the new Adobe Data Model data connection. Form fields are bound to data fields in the Designer data view pallet in the usual way.
Localisation
To create forms in multiple languages using XLIFF it is necessary to configure Designer to create a unique identifier for each text string. This can now be configured using the ‘Create Translation IDs when Saving’ property on the Document Handling section of the Options dialog box.
Three new locales have been added to Designer ES2: Catalan, Basque and Tagalog.
Usability Improvements
Based on community feedback, Adobe have made various usability improvements, including:
- Filtering data views. Makes it easier to handle large data connections by filtering for the sections that you are working on
- Integration with Workbench ES2. Workbench now opens forms for editing in Designer stand-alone which provides the full set of features and makes better use of screen real-estate. The two work well together – seamlessly opening and saving forms between the two
- Default scripting language. Rather than set the language to JavaScript every time you create a new form, you can now set it once in the Options dialog box
- Pasting into drop-downs and list boxes. Rather than enter each value of a list separately, you can now copy the entire list from a text editor and paste it into Designer
- Enhanced scripting assistance. The script pallet feature that suggests methods and properties as you type now provides additional information including input and output parameters
- Snap to Object. Makes it easier to layout objects in a positioned layout
- Metadata properties. You can now add custom properties to a form, such as copyright URLs, in the Info tab of the Document Properties dialog box
Find out more…
Resolve a specific LiveCycle Designer issue or have general questions answered by one of our experienced consultants by contacting Avoka.
Learn more by attending our certified LiveCycle Designer training course.
Explore what is possible with LiveCycle Designer on our website.
All Avoka Components for Adobe LiveCycle now ES2 compatible
We have updated all of our Adobe LiveCycle Components and they are now ES2 compatible. Please visit the Components page of the Avoka website for an overview of available Components. You can download our Components free of charge for evaluation and development purposes. or buy a subscription that will give you a year-long production licence to all Components. Existing users of our components are eligible for a free upgrade as long as your subscription is current – licence keys remain the same.
What are Avoka Components for Adobe LiveCycle ES2?
Adobe LiveCycle ES derives much of its power and ease of use by enabling complex human, integration or computation tasks to be built into reusable modules known as LiveCycle ES2 Components. These components are the building blocks of Adobe LiveCycle ES2 and enable process designers to visually assemble workflows without requiring any programming skills.
These components are developed in Java and can therefore provide a diverse range of services to your application. They include:
- Integration with existing business applications
- Integration with third party applications
- Interacting with databases and other data storage systems
- Performing complex calculations
- Converting and transforming data and information
PDF Accessibility – part 3 of 3 (reading text)
This blog is the third in a series that explores PDF accessibility. This installment describes how to implement PDFs using Adobe LiveCycle Designer so that form text is accessible to users of assistive technologies.
In this series:
PDF Accessibility – part 1 (introduction) – an introduction to accessibility standards and technologies
PDF Accessibility – part 2 (reading fields) – a step-by-step guide on making form fields accessible
WCAG 2.0 Guidelines
1.3.1 Info and Relationships: Information, structure and relationships conveyed through presentation can be programatically determined or are aviable in text 1.3.2 Meaningful Sequence: When the sequence in which content is presented affects its meaning, a correct reading sequence can be programatically determined 2.4.1 Bypass Blocks: A mechanism is available to bypass blocks of content that are repeated on multiple Web pages 2.4.5 Multiple Ways: More than one way is available to locate a Web page within a set of Web pages except where the Web Page is the result of, or a step in, a process 2.4.6 Headings and Labels: Headings and labels describe topic or purpose 2.4.10 Section Headings: Section headings are used to organize the content 3.2.3 Consistent Navigation: Navigational mechanisms that are repeated on multiple Web pages within a set of Web pages occur in the same relative order each time they are repeated, unless a change is initiated by the user
These guidelines are all about making it easier for assistive technology users to find text.
This is important due to the way that assistive technology users interact with a form. Unimpaired users can rapidly identify form text. They have the benefit of being able to scan a form by eye in any direction that they choose and rapidly absorb large amounts of text. Assistive technology users can access the same information, but at a slower pace. Mechanisms are required to present form structure so that assistive technology users can navigate directly to areas of interest.
Tags
You add structure to your PDF by tagging text. Similar to the table of contents in a document, tags are used by assistive technology to provide the user with a summary of a form’s content and the ability to quickly navigate to an area of interest without having to take the time to read the entire form.
To make your tags available to assistive technology, you have to check the ‘Generate Accessibility Information (Tags) for Acrobat’ in the ‘Form Properties’ dialog window.
Headings
Add structure to your PDF by tagging the headings. Set the ‘Role’ property to ‘Heading Level X’ for text objects in the accessibility pallet.
Headings can be tagged in a hierarchy up to 6 levels deep. Use the same rules that you would in a document – tag heading level 3’s under heading level 2’s etc. Heading tags can only be applied to an entire text object – you cannot tag part of the text.
When an assistive technology user runs the commands to navigate headings, they will be given the ability to quickly browse the form’s structure and navigate quickly to the area of interest. For instance, JAWS10 can display the dialog window below and will read all headings or only those at a specified level and the ability to ‘Move To Heading’.
Lists
Add structure to your PDF by tagging lists. This is appropriate for simple text lists. Do not tag nested lists or lists that contain fields.
Set the ‘Role’ property to ‘List’ and ‘List Item’ on subforms in the accessibility pallet. The ‘List’ subform should contain at least one ‘List Item’ subform, but not necessarily at the top level.
When an assistive technology user runs the commands to read lists, they will be given the ability to quickly navigate to any list in the form. For instance, JAWS10 can display the dialog window below and will read the content of each list. Each item in the dialog represents a ‘List’ with all its ‘List Items’. The screen reader reads any text that it can find within the tagged subforms.
A Quick Way to get to the Script Editor in Designer
When you first start up Designer, the script editor is only half visible just underneath the toolbar. Usually I make it a little bigger by moving the thumb down a bit, like this:
Then I double click on the thumb to move it all the way to the top, and double click again to re-expand.
But this is very inconvenient. The script editor is not really big enough to see bigger blocks of script, and if I increase its size, it takes up too much of the screen real-estate that I need for actually designing my form. So I end up continuously making it bigger and smaller depending on what I’m doing. Very irritating.
Here’s a simple way around this.
Firstly, set up a keyboard shortcut to toggle the Script Editor visibility. Use the Tools/Keyboard Shortcuts… menu, select Product Area = Window, find the Script Editor command. Then click in the “New Shortcut” field, press F4 (or your shortcut of choice), and click Assign.
Then re-arrange your Script Editor to suite your needs. My favourite is detached from the main window (or undocked), and fairly large, as shown below:
There is a bit of a trick to get this right, because as soon as you make the Script Editor a bit large, it will try to dock whenever you move it. So…
- To undock it, double click on the move bar of the Script Editor. (The move bar will appear either at the top or left of the Script Editor, depending where it’s docked.)
- Then reposition the Script Editor, NOT by moving it, but rather by resizing both the top left and bottom right corners. Resizing won’t cause the Editor to dock, whereas even the slightest movement can.
From this point on, a single F4 keypress will toggle the Script Editor on and off, and I always have the script editor just where I need it when I need it.
Many thanks to Stefan Cameron for this trick.
LiveCycle @ MAX
Last week I had the privilege of attending MAX, Adobe’s annual conference, and being part of the buzz and excitement around Adobe’s strategy and direction.
There is always a lot going on at MAX, and it’s always difficult to decide what to attend, and what to blog about – so I thought I’d focus on LiveCycle, and leave Flex and Flash and Creative Suite to others.
Some of the highlights for me were:
- Walking in to the LiveCycle pre-conference tutorial on Sunday (yes, people gave up their weekends to attend technical training) and seeing an entire roomful of people (at a rough count, about 70 workstations) banging away building applications using the LiveCycle ES2 beta. Apparently, LiveCycle was the only one tutorial that was completely sold out, as were several LiveCycle sessions during MAX.
- Two new products added to the LiveCycle platform: LiveCycle Mosaic (http://www.adobe.com/products/livecycle/mosaic/) and LiveCycle Collaboration Services (http://www.adobe.com/products/livecycle/collaborationservice/ )
- LiveCycle WorkSpace approvals via mobile devices.
- Seeing LiveCycle and Enterprise Development being showcased at the opening keynote by Ben Forta and Rob Tarkoff . http://max.adobe.com/online/keynote_monday/ – About 62 minutes in for Rob and 71 minutes for Ben. Both talks includes a few sample enterprise applications, as well as demos of Mosaic, approvals via mobile devices, and more.
- The new version of Form Guides, or just Guides, as they now seem to be known. We’ve been playing with the early versions of the new Guide Builder for a little while now, and we think Adobe have done an awesome job on this release – Guides are now very powerful and very easy – we’re very very happy.
- The Adobe Data Model. In the Enterprise, everything usually starts and stops with data in a database somewhere. Data model driven development is part of LiveCycle Data Services, but is also used as the basis for the data storage in the new Guides. We’re very excited about this.
http://tv.adobe.com/watch/max-2009-develop/modeldriven-development-using-flash-builder-4-and-livecycle-data-services-es/
You can view many of the Adobe sessions on Adobe TV here:
http://tv.adobe.com/show/max-2009-develop/
including this one, on What’s New in LiveCycle ES2
http://max.adobe.com/online/session/46
This is Jayan’s pick of the sessions:
http://blogs.adobe.com/livecycle/2009/10/max_2009_sessions_about_livecy.html
One other amusing note: The mythical John Jacobs, who is a “sample” user that appears in many of LiveCycle’s samples and demos, actually exists. He was at the MAX conference, and attended the pre-conference tutorials. Hello John!
Form Design for the Rest of Us – Avoka SmartForm Composer
There are some people who have an instinctive feel for design – color, balance, typefaces, effective use of whitespace – and who can create beautiful looking forms. I can’t. My forms generally look like they were designed by a six-year-old with a box of crayons. I usually rely on someone else with creative design skills to help me to come up with a good looking form.
On the other hand, I can build forms with great functionality, because I’ve got a programming background, I’ve been building forms using LiveCycle Designer for 5 years, and I’ve read large portions of the 3000+ pages of API documentation that Adobe provide (yes, really). Plus I have a team of very experienced LiveCycle developers around me who I can call on to help me if I get stuck.
Composer Design Window
You may be a bit of a geek like me, or perhaps the thought of programming bores you to tears. You may have some of the creative talents that I lack, or perhaps you’re “creatively-challenged” like me. Or maybe you’re a pragmatist who doesn’t care about style or programming, all you’re really concerned about is the business problem of collecting the data that you need, and making it as easy and intuitive for your users to interact with your form.
Whichever category you fit into, it’s unlikely that you have the complete set of skills and experience to build a SmartForm from beginning to end.
This is exactly why we built Avoka SmartForm Composer – for you!
We’ve taken all of the knowledge that our Form Design Team have gained in dozens of person-years of experience in building forms, and we’ve encapsulated all that knowledge in Composer. We’ve wrapped that knowledge up into a web-based Flex application that makes it really easy to build forms.
Smart Templates
With Composer, you simply select one of our pre-defined Smart Templates, and you’ll end up with a form that looks great, no matter what your design skills. Add business logic easily using our intuitive rules editors – no programing required. Or choose from our specially designed pre-fabricated “blocks” that embed professionally coded business logic into your form. Click the “Publish” button, and Composer will generate an Adobe XFA compliant PDF SmartForm, and optionally publish to the LiveCycle Repository or Avoka FormCenter. Need to change something across all your forms? Simply tweak the master Style Sheet to change colors, fonts, margins, logos and other visual aspects of your form.
I’m biased, of course, but I’m very excited about Composer. I think it will enable all of us to build intelligent, interactive PDF SmartForms easily, quickly and reliably, and ultimately help to streamline our business processes.
For more information about Composer (including demos), or to stay informed or sign up for our beta program, please visit: http://www.avoka.com/composer
What is a SmartForm?
Heard about SmartForms, but confused by the jargon? Never heard of SmartForms, but interested in the latest developments in electronic forms?
This blog provides the need-to-know facts about SmartForms. For a full overview, please watch SmartForms – the next generation of electronic forms.
| Running time: | 13 minutes |
|---|---|
| Content: | What is a SmartForm? |
| Demo of three SmartForms in action | |
| Why SmartForms? | |
| Who is using Smartforms? |
SmartForms
A SmartForm is an electronic form used by your customers, staff and partners to apply for products and services.
Key capabilities include:
- perform complex calculations
- dynamically display content as it is required
- perform sophisticated validation of the data
- lookup data from remote systems
- securely submit the data to your organisation’s systems
Geneaology of the Electronic Form
Not all electronic forms are equal. They differ in how smart they can be in making it easy for users and ensuring that you capture high quality data.
Electronic forms can be categorised into:
- Print form downloaded from your web-site, printed, completed by hand and posted/faxed to your organisation
- Fillable form downloaded from your web-site, filled-out on screen before being printed and posted/faxed to your organisation
- SmartForm downloaded from your web-site, filled-out on screen and submitted electronically
Print Form
The only electronic aspect to this is in its distribution. You face the same challenges as paper of interpreting hand-writing, handling forms that have been incorrectly filled-out and manually entering the data into your systems. According to the Australian outsourcing company review of 2006, 40% of forms contain missing information. Each of these failures result in higher costs and lost sales opportunities
Fillable Form
Fillable forms perform basic validation on the data as it is entered and will print an easy to read form. You will typically need to re-key this data into your back end systems. Optical character recognition (OCR) is feasible with fillable forms if you have the necessary infrastructure.
SmartForm
The most significant development in electronic forms since their inception. For the first time, it is now possible to guide novice users through the completion of complex forms in a highly engaging experience.
SmartForms presentation at BFMA
I was happy to accept an invitation to present at the BFMA region 8 September meeting.
I chose to talk about SmartForms; I described some of the innovative work that has been performed in Australian government over the last four years and shared some lessons learnt from the Red Tape Blueprints project that was delivered for a consortium of 41 NSW councils.
I ran the webinar on Adobe Connect and present the full recorded session below in four parts:
-
Part 1: What is a SmartForm? Demo of discovering a SmartForm Demo of filling out a Smartform Demo of user’s submission history -
Part 2: Why should you care about SmartForms? Demo of eForms benefits calculator Leading SmartForm projects in Australian government Introduction to Red Tape Blueprints case study -
Part 3: Red Tape Blueprints solution Red Tape Bluepirnts challenges overcome -
Part 4: Demo of SmartForm submission -
Part 5: Demo of providing attachments Demo of making payment Demo of signing a receipt
Part 1
Part 2
Part 3
Part 4
Part 5
About BFMA
BFMA, or the Business Forms Management Association, formed 50 years ago to address the unique educational and networking needs of forms designers and managers. With today’s technology, the forms function has broadened in scope to include everything from traditional paper forms to electronic data capture and the databases and applications that support it.
BFMA region 8 (Asia Pacific) is lead by Jessica Enders at Formulate.