Developing Application User Interfaces

Application User Interfaces (AUI) are designed using the ETCETERA® EPM AUI Designer Module (Designer). Designer provides predefined Standard Controls, Advanced Controls, Electronic and Digital Signature controls as well as an extensive array of Control Properties to facilitate rapid and easy prototyping, testing and deployment of solution dialog boxes and online applications.

An AUI is a Graphical User Interface (GUI) within which information is presented, collected and ultimately shared with extraordinary accuracy and security through an online process.  Data is enhanced and validated through the use of database lookups, dynamic selection lists, time and date controls, spell check, conditional rules and dynamic form elements.  The use of electronic and digital signatures allows for secure and verifiable processes.

The AUI is the underlying foundation of a comprehensive application when used in conjunction with a data dictionary (for managing all data elements for the EPM module across applications) combined with a clear understanding of data definitions and requirements.  Blank AUIs are selected for completion within the ETCETERA® EPM module.  Here the AUI becomes a work in process transaction and dynamic GUI.  Data is entered into the online AUI and it moves through routing, approval and check-in processes that result in data available for EP Applications, host applications, reporting and executive dashboards.

AUI design is often performed by the user, but Advanced Controls and Custom Controls require more technical expertise (provided internally or by your virtual resource at ScerIS).  Using a “drag and drop” development environment, users familiar with creating tables in WORD can often develop AUIs in ScerIS AUI Designer.

Benefits of the ETCETERA® EPM AUI Designer:

  • Quick and easy application design.
  • Predefined Standard Controls, Advanced Controls and Signature Controls combined with over 75 Control Properties and Custom Controls developed by customers, offer a truly robust environment that provides for an excellent user experience.  An individual AUI can have links to multiple external data sources.
  • Signature Controls and integration to signature pads are included in the controls provided.
  • ScerIS AUIs integrate with the Enterprise Process Management environment where AUIs are selected from a library of online applications, utilized, suspended, completed, signed, routed and eventually committed as a permanent record (both data and the human viewable AUI).
  • AUIs are designed to render as human viewable, dynamically expanding text areas (displayed on monitors with scroll bars) and automatically adding footers as required for the application deployed.
  • AUIs provide for associating supporting documents to the online AUI in production, even to selected fields in the AUI.
  • AUIs can include nearly any content and presentation, including photographs, training videos, links to external presentations and more.
  • All data captured in the production environment is available to use in EPM, or by host applications, reports and executive dashboards.  Data on AUIs does not need to be rekeyed into other applications with data interfaces –the data is already there.
  • AUIs eliminate the need for paper forms purchases and provide for electronically routing online AUIs for review, approval and processing.

Designer is a drag and drop design toolkit utilizing Microsoft Visual Studio. Designer provides for a simple but highly customizable and extensible GUI design process and provides an extraordinary, easy to use set of controls for both technical and non-technical users alike.  Using Designer, users often create AUIs in less than one hour per page.  Individual applications are often deployed in hours and entire solutions in days, saving precious time and money and providing for an outstanding user experience (applications when they’re needed).  When the time comes to modify or change AUIs, users are able to reuse existing interface elements, making the design and deploy cycles even shorter.

AUI Development

  1. The Document Frame is the main window for creating, viewing, and editing the AUI.
  2. The Toolbox contains a list of controls available for designing AUIs
  3. The Solution Explorer gives a view of all the existing application files available.
  4. The Control Properties Frame shows the individual properties for any control, such as size, validation properties and data element names.

Predefined Standard Controls

Designer includes a selection of Predefined Standard Controls enabling users to accommodate most design challenges using a drag and drop, point and click methodology.  The controls are easy to use and intuitive. All of the programming necessary to manage each field placed on the AUI is already in the control.  No programming is necessary for the standard predefined controls used by non-technical people to create AUIs.  Standard configuration attributes of these controls include field naming, data validation, and field presentation.

Predefined Advanced Controls

Designer includes a selection of Predefined Advanced Controls enabling users to implement highly customized features into the AUIs and data capture requirements.  These predefined advanced controls enable data validations (no limit on the number of data sources used per AUI), expression based field completion, dynamic presentation of additional sections or required fields based on rules or conditions applied to other fields and dynamic expansion by the user of sections on the AUI in order to accommodate the exact number of sections and sub sections required in their work (for up to four levels of repeating sections).

Predefined Electronic and Digital Signature Controls

Designer includes Predefined Signature Controls that enable a user to capture either a written signature or a signature using network authentication or ScerIS user authentication.  Signatures can lock or bind to other controls in the Application User Interface (AUI) as determined by the AUI designer.  These controls are bound to the other controls in such a way that any change to any data values in the controls will negate the signature.  Written signatures are captured with their biometrics (depending on the capability of the signature pad).  Biometrics typically include capturing the user’s handwritten signature’s strokes, speed, pressure and timing.

Control Properties

Over 75 Control Properties provide for a simple but highly customizable and extensible AUI design process.  Control Properties make this a truly rich user experience because they simplify the implementation of predefined controls and AUIs.  Many Control Properties are specific to certain predefined controls, such as “Controls_to_sign” which is a property that lists the Control IDs (representing fields on the AUI) that the signature control is bound to.  Many of the Control Properties apply to nearly all controls.  AUI designers can specify the Control ID, name fields, select font controls, validate field properties, specify colors and borders, provide tables or views, specify values to output for some controls (like check box controls), specify fields in data sources and much more. View the Control Properties grid here.

Custom Controls

Take advantage of the extensibility of standard .NET controls and extend the controls or Application User Interface using C#, VB.NET, JavaScript, jQuery and/or CSS.

Shroud

The shroud is a frame around the AUI that provides for instructions, attach files associated with the AUI, view files associated with the AUI, displaying error messages that describe the error and the field name, and sometimes for fields used as a part of a workflow that are hidden to other employees using FieldClass security.  If the AUI is rendered as a viewable file into the content repository, the information in the shroud is excluded in that rendering.  If presenting instructions, the AUI can use a collapsible panel so that instructions are only shown when requested by the user, and therefore don’t take up valuable geography at the desktop or mobile device.

Embedded Files

The AUI can reference other files and present images.  This can include videos used interactively with the AUI for training and testing.

Field Class Security

Fields in the AUI can be secured to limit actions by users.  Users without FieldClass privileges don’t know the field exists.  Other users may be restricted to adding, editing or viewing data in a protected field.

For Mobile Devices

Responsive design encompasses the ability for an HTML page to change how it looks when rendered on a mobile device.  The Twitter BootStrap Library with a CSS Grid System is used with Designer to create responsive designs.  Bootstrap helps organizations to scale applications for presentation on phones, tables and desktops.

AUI Rendering

AUIs are designed with consideration for a final rendering as a graphical image, stored in its final form in the Content Management system.  When rendering HTML AUIs, the ScerIS application automatically expands text areas and list boxes based on the amount of content in the box, automatically determines where to make page breaks based on an analysis of the user interface, applies headers and/or footers to pages and commits the graphical representation of the HTML to the content repository along with key index values which associate the document with other related content in the repository.

User Interface