Articles in this section

See more

Form Development Editing Guide

  • Updated

Content

Overview

Create an HRC Form

Form Editor

Using the Control Palette to create Form Elements

Tips and Ticks

Overview

Welcome to Form Development. This article was designed to guide you through the process of:

  1. Creating an HRC Form
  2. Modifying the Form Category
  3. Updating the Title Caption of the Form
  4. Intro to the Control Palette
  5. Intro to the Object Inspector

Note: All form development should be done in the DEV environment of Profile EMR, and the forms we built should follow the Form Development Standards.

There are different form development request that are received: 

  1. New Form Development
    • Definition:  The form currently does not exist in Profile EMR.  It will need to be created from scratch using the zCustom Form Template as a reference or by building of the zCustom Form Template that you copied into your working dev folder.
  2. Update an Existing Form
    • Definition:  The form has already been developed and lives in Profile EMR CDO Explorer.  In this instance, you would take a copy of the existing form and place it into your working dev folder. 

Creating an HRC Form

Below are the general standards specifically for when you need to create a new form or edit an existing form.  The Form Properties should be modified at the very beginning of any form development activity.

Navigate to CDO Explorer

  1. Log into DEV Env with your Sys Admin account. Select Z - DO NOT USE - IMITS POS. 
  2. In the top menu, click Maintain > Templates > Health Records Collection Templates. mceclip0.png
  3. The CDO Explorer window should now appear. mceclip1.png

Creating a New Form 

When creating a New Form, there are two options of development.  As a team, we have designed the zCustom Form Template that can be used for reference when developing a new form from scratch or to be developed on top of after you have created a copy of it for your development purposes. 

Important Note: Do not edit directly into zCustom Form Template in the VCH Folder.  This template was created with the intention to be copied to individual team working dev folder  for ALL New Form Development purposes.  Changes to this Template must be reviewed and approved by the Form Development Working Group.

Create a copy of zCustom Form Template

  1. Click on the VCH folder. Navigate to zCustom Form Template.  mceclip3.png
  2. Right Click and then select Copy from the menu options. mceclip4.png
  3. Paste the zCustom Form Template into your working dev folder. mceclip5.png

Editing an existing form

When update or modification requests are received, the best practice is to export the Existing Form from SUPPORT ENV and import it into DEV ENV to make sure you are editing the most current version of the Form.

Tip: If you do not know where the Existing Form lives in the CDO Explorer folder, an easy way to check is by searching for the form under New Encounters > Forms , then hovering over the search result. When you hover over the Existing Form Name, the full folder path will appear.  Note it down so you can find the Existing Form in the later steps. mceclip0.png

Locate the Existing Form

  1. Launch and Log into the Support Env as a Sys Admin.
  2. Navigate to the CDO Explorer.
  3. Navigate to the folder path where the Existing Form is located.  
  4. Click on the Export Form icon.                                                                                       mceclip6.png
  5. Save the jfa to the Dev Folder for your JIRA item.
  6. Launch and log into the Dev Env as Sys Admin. 
  7. Click on Organisation, Import & Export, Import Jaffa File ...mceclip7.png
  8. The Import Files Open Dialog will appear.  Locate and select the jfa you just saved into your Dev Folder. Click Open to begin import process.
  9. The Jaffa File Import window will appear.  Click on the Start button to begin import. 
  10. Once complete the Data Conversion and Data Import Report List window will appear.  This notifies you that the import is now complete and if there were any errors you would be aware of. 
  11. Now that the import has been complete, navigate to the existing form in the CDO Explorer window.  Create a copy of the form and paste it into your working dev folder, so that you can begin working on it.

Form Category Definitions

The very first step in developing a Form is to ensure that it has been mapped to the correct Form Category.  There are 5 categories to choose from: 

  1. Investigation Requisitions
    • External form to communicate what type of investigation a client requires
    • E.g., Lower Mainland MRI Requisition
    • A request for a medical test or procedure to be completed at an external medical facility.
    • Generally this type of form is filled out by a clinician and sent to the external medical facility to fulfill the tests or procedures being ordered.  The results are then send back to the ordering clinician for review to create a treatment for plan for the client
  2. Evaluation Tools
    • Internal form to document targeted assessment and evaluation tools to aid in diagnosis
    • E.g., Edinburgh Postnatal Depression Scale (EPDS)
    • A document that contains a set of questions, statements or other prompts for the purpose of gathering information from the client to determine their current medical conditions
    • Commonly seen on these types of forms are auto-calculated scores based on their answers to the questions or statements
  3. Referral resources
    • External form to communicates what type of referral a client requires
    • An order from a clinician to an external clinic/ provider specialist or get certain medical services
    • This category has been separated into two subcategories: 
      • Community 
        • Referral to community or outpatient services
        • E.g., Vancouver Primary Care Network Referral
      • Hospital
        • Referral to acute services
        • Includes outpatient services based at acute facilities
        • E.g., St. Paul’s Hospital Thrombosis Clinic Referral
  4. Clinical Documents
    • Internal form to document clinical interaction with client
    • E.g., SU WDM Intake, MAiD Waiver of Final Consent
    • A document that requires clinical information provided by client in order to be complete
    • Generally used for internal purposes and is not an evaluation tool
  5. 3rd Party Documents
    • External form that is neither a requisition nor referral
    • E.g., Ocrevus (ORC) Enrolment

Modifying the Form Category

  1. Double click on the Form you are working on.  The Form Development window will appear. 
  2. If the Type is set to Custom Forms (visible in the CDO Explorer window).  Right-click on the top node (form name) >Modify > Concept and Termmceclip8.png
  3. The Term Selector will appear. Click on the + icon beside Form Categories to expand the list.    From this list, select the form category that best matches the form you are developing. Then click OK. 
    mceclip9.png
  4. The term selector will close and you will notice that the form name has now changed to the form category you just selected.

Renaming the Form

Now that the Form Category has been updated to reflect the form being development.  You want to rename the form to what the requestor has specified. 

Note: before renaming an existing form, analysis is required to understand if this will affect other forms, macros or TTs. Follow the steps found in the Rename/Delete/Move Form Workflow article.

  1. Navigate back to the Form Development Window for the form you are working on.  Right click on the Top Node and then click on Rename. mceclip10.png
  2. The Top Node field will now be available for you to change the name. Enter in the name of the form you are developing. mceclip11.png

Changing the Title Caption

  1. In the Object Inspector, select the top node in the list (if you’re using the zCustom Form Template, it will say “Enter New Caption Here”)
  2. Under the Caption property, change the value text.  After you click away from the field, you should see it update immediately in the form editor window. mceclip5.pngNote: The node itself will not refresh with the text entered until after the form is saved and closed.

Adding / Removing Pages

At the button left of the form editor window, there are buttons to add or remove pages to the form. Note that removing page will remove the current page active/in view.

mceclip0.png

Form Editor

  1. In the top bar, click on the Open form editor iconmceclip3.png
  2. The form editing window, along with the Control Palette and Object Inspector windows will open. Tip: if for any reason the inspector and/or palette doesn’t open, you can launch them by clicking on the Open Control Palette & Object Inspector iconmceclip4.png

Object Inspector 

The Object Inspects window contains a list of all the elements on the form you are building. When an element is selected in this window, its settings are displayed in the lower half of the window.   These setting will appear in two tabs:  Properties and Events.  The Properties tab contain all the individual properties of the element which can be changed.  See the Form Elements section below to understand what is important to note/change per element type.  See the Common Form Elements Properties section below to view important ones that are shared among multiple form element types.  The Events tab shows what macros are associated to that form element. This is not necessary to change for Simple Forms.

Control Palette

The Control Palette window is where all the controls that can be use during form development are located.  Below is a list of all the Controls and what they are used are.

mceclip12.png

Control Functions

Control Icon Control Name Control Function
mceclip14.png Select Used to select elements on the form.
mceclip15.png Label Used for:
• Caption: Enter Static text which displays on the form 
• Populate Value: Print variables are available to auto-populate the label, e.g. patient’s full name.
mceclip16.png Edit Control Used to enter details in a single line, which will be stored on the form or auto-populate from the database. 
Common properties used for this control are:
• EditKind: Select different types of Edit controls, e.g. Date, Patient Lookup, Custom (default)
• HRI: select the HRI that the component will link to
• Name: name the component, e.g. edtFullname
• PopulateValue: Print variables are available to auto-populate your component, e.g. with patient’s full name
mceclip17.png Multiple Line Text Editor Used to enter details in multiple lines, which will be stored on the form. 
Common properties used for this control are:
• HRI: select the HRI that the component will link to
• Lines: Use to enter default text in the Memo box
• Name: Name the component, e.g. memDetails
• Scrollbars: specify if horizontal and/or vertical scrollbars are required
• WordWrap: use to word wrap text in the memo box
mceclip18.png Rich Text Control Used to store styled text.
mceclip19.png Radio Button Used for either / or values. Only 1 option is available, e.g. Male or Female; or a rating on a scale from 1-5.
Common properties used for this control are:
• Caption: enter text which displays to the right of the radio button
• Checked: select whether the radio button is automatically selected when the form first opens
• CheckedValue: same text as the Caption
• Group: enter a group name, which all relevant radio buttons will belong to e.g. Gender. This ensures that only one button in a group can be ‘on’.
• HRI: select the HRI that the radio button will link to
• Name: name the radio button, e.g. rbYes, rbNo
mceclip20.png Checkbox Used for multiple valued, e.g. ‘Has phone’, ‘Has cellphone’, ‘Has email’ etc. 
Common properties used for this control are:
• Caption: enter text which displays to the right of the checkbox
• Checked: select whether the check box is automatically selected when the form first opens
• CheckedValue: Same text as the caption
• HRI: select the HRI that the check box will link to
• Name: name the check box, e.g. cbYes, cbNo
mceclip21.png Button Used to insert a button.
mceclip22.png Combo Box Provides a drop-down list for values to be selected.
Common properties used for this control are:
• HRI: select the HRI that the combo box will link to
• Items: enter a list that you want to appear in the dropdown box
• Name: name the component, e.g. cbLocation
mceclip30.png Bevel Used as a frame or lines to visually group a set of components.
Common properties used for this control are:
• Shape: select the type, frame, or a line if you prefer
• Style: select the style of line you prefer
• VisibleWhenPrint: default is true. Set to false if you don’t want the bevel to print
mceclip24.png Shape Used to insert a shape. 
Common properties used for this control are:
• BorderStyle: select the style of border you prefer
• BorderWidth: select the width of border you prefer
• FillColor: select the colour of the shape
• FillStyle: select the style for filling in the shape
• Shape: select the type of shape, e.g. rectangle
mceclip25.png Picture Picture Used to insert a picture. 
Common properties used for this control are:
• Picture: select the picture to place on the form
mceclip26.png Slice Image Used to display a picture where users have the ability to mark areas of the picture for treatment tracking.

 

Form Control Elements & Properties

Once the Controls are placed onto the form, we call them Form Control elements.  These elements can be all be copied and pasted from one form to another or within the same form.  The Form Control elements can be edited at anytime.  To create a new element, just click on the associated icon and then click anywhere in the form editor canvas. 

These are important shared Form Element Properties across all or majority of the form elements commonly used:

Property Name Details
Name The name of the form element. It must be unique and is auto-populated. It’s useful to change if it will be referred in a macro, otherwise it’s optional to change for your own reference. Does not affect anything visually to the user
Height The vertical length of the element in pixels
Width The horizontal length of the element in pixels
Top The vertical position of the top left most point of that element on the form editor window/canvas, where 0 denotes touching the top of the frame.
Left The horizontal position of the top left most point of that element on the form editor window/canvas, where 0 denotes touching the left edge
Font How to change/select the font style (font family, size, colour of text, bold, italic, underline, etc.)
Alignment Text alignment within the field. Default and common usage is left justified
Caption The text that will display on the form specific for labels, check boxes, radio boxes, buttons
HideBordersWhenPrint If it’s a field with borders (ex: text field, dropdown), if set to true it will make the border lines invisible when printed. Preference is to make this True but more importantly it is consistent across the form
PopulateValue See Populate Value with Print Variable section
ReadOnly Controls if the field is editable by the user or not. Default is False. If set to True, it should automatically change the field background and font to grey
MaxLength For fields that users can type into, restricts the number of characters allowed to be entered
HRI To link an HRI to this field. If you use this, this is no longer a Simple Form.

 

Using the Control Palette to create Form Elements

Labels

mceclip7.png

 Example: mceclip8.png

Create text in the form that is for displaying only and not for user editing. This element will auto-adjust in size based what is written in the caption field

Property Name Details
Transparent Gets rid of the background colour behind the text and will show whatever colour is underneath this element. Default is set to False

Populate Value with Print Variable

Text fields, multi-line fields can be pre-populated with values like client demographics or POS/logged on user information. To leverage this, use the PopulateValue property.

  1. Click on the three dots beside PopulateValue property: mceclip31.png
  2. A new window should open. Tick “Auto-Populate”, leave Value Type as “Print Variable” then click on the 3 dots to the right of the Print Variable field mceclip32.png
  3. The Print Variables window will display. This shows different data that can be used to auto-populate the field when the form is first loaded by a user. The top pane shows a list of some of the available data. The data is broken up by categories/folders. The most useful ones for SF are:
    • Doctor / LoggedOnUser – will grab the user’s information like Full Name, MSP, etc.
    • Letter – where you can find today’s date and time
    • Patient – where to find patient demographics and other patient related data
    • POS – clinic information like clinic name, phone and fax

      See below for the icons usage:

               mceclip33.png

               A. Collapse all folders

               B. Expand all folders

               C. By default, this is selected. It will show you only Print Variables in the form already.

                   Click it to show all possible variables to use

               D. Toggle the search bar

  1. The best way to find a variable if it’s not already present in the default view:
    1. Click on the Collapse All Folders icon
    2. Deselect the Show only used items At this point all the hidden folders/categories will show
    3. Click on the Search icon to reveal the search bar at the top of the list
    4. Select the folder you want to search in (ex: if it’s patient related, click on Patient)
    5. Type into the search bar then click on the Search button
    6. It will find you results starting from within the folder selected
    7. Note the variable name that shows in the grey area between the list and the iconsmceclip34.png
    8. Keep clicking the Search button until you find the value you need
    9. Once found, click on OK
    10. The Print Variable field should now be filled in with what was selected. Click on OK to commit this change and close this window

              mceclip35.png

Tip: after you auto-populate a field, you can use the Text or Lines property to write down what it’s being populated with. This is more for sustainment purposes. It’ll make it easier to identify in the form editor view which fields are auto-loaded with information or not. If it’s linked to a Print Variable for auto-population, the text written in the Text/Line property will wipe when the form is loaded anyway

Text Field

mceclip9.png

 Example: mceclip10.png

Users can input text in this field. This is for when you want the user to enter fairly brief data

Property Name Details
EditKind

Changes the type of accepted values. Default is edkdCustom

  • edkdCustom – free text. No restrictions on what the user can enter
  • edkdDate –only date value allowed and shows calendar when selected
  • edkdDigits – only whole numbers allowed
  • edkdNumeric – only numbers (including decimal) allowed
  • edkdTime – only allow valid times (00:00 – 23:59)
Text Can be used to pre-populate text into the field. Will be wiped once user loads the form if PopulateValue is defined

 

Multi Line Text

mceclip11.png

 Example: mceclip16.png

This is like the Text Field/ Edit Control however supports multiple lines of text

Property Name Details
Lines Can be used to pre-populate text into the box. Will be wiped once user loads the form if PopulateValue is defined
ScrollBars

Determines if scroll bars are visible by default. Default is ssNone

·         ssBoth – both horizontal (bottom) and vertical (right side) scroll bars will show within the box

·         ssHorizontal – horizontal scroll bar on the bottom will show

·         ssNone – does not show any scroll bars initially. If user types in lines more than what is visible though, it will automatically add the vertical scroll bar on the right side

·         ssVertical – vertical scroll bars on the right side will show

 

Tip: To make sure the right number of lines are visible to the user, using the Line property, temporarily add at least 1 character per line you want visible. Now you can see how many lines are visible in the form editor. Once you adjust the height so it shows the desired amount with not too much extra space below (which might look misleading to the user as able to add more text), you can now go back and clear the Lines property for usage.

 

RichText Editor

mceclip14.png

Example: mceclip15.png

This field is like Multi-Line Text Editor but allows formatting/styling of the entered text

Property Name Details
RTFText Can be used to pre-populate text into the box. Within the editor box, you will see options to control the styling of the text. Will be wiped once user loads the form if PopulateValue is defined
ScrollBars

Determines if scroll bars are visible by default. Default is ssNone

·         ssBoth – both horizontal (bottom) and vertical (right side) scroll bars will show within the box

·         ssHorizontal – horizontal scroll bar on the bottom will show

·         ssNone – does not show any scroll bars initially. If user types in lines more than what is visible though, it will automatically add the vertical scroll bar on the right side

·         ssVertical – vertical scroll bars on the right side will show

 

Tip: To make sure the right number of lines are visible to the user, using the Line property, temporarily add at least 1 character per line you want visible. Now you can see how many lines are visible in the form editor. Once you adjust the height so it shows the desired amount with not too much extra space below (which might look misleading to the user as able to add more text), you can now go back and clear the Lines property for usage.

 

Radio Button

mceclip17.png

 Example: mceclip18.png

When grouped with other radio buttons, it will allow only one option to be selected within the group. It comes with a label attached

Property Name Details
Checked Determine if this particular one is auto-selected. By default set to False
Group Radio buttons with the same value in this field will be grouped together (ex: if 3 items are in the group A and 3 items are in group B, only one item may be selected in A and only one item may be selected in B)
UnselectCheckedByClick Normally once the user selects one option in a group, the user can only change options but not completely clear it (makes it mandatory). Setting to True will allow the user to clear the radio button. By default is set to False

 

Checkbox

mceclip19.png

 Example: mceclip20.png

Users can tick/untick independent from other fields. It comes with a label attached

Property Name Details
Checked Determine if is auto-ticked. By default set to False

 

Button

mceclip21.png

 Example: mceclip22.png

Users can click this. A macro must be attached for it to be useful. Outside of the default buttons related to saving and printing, if your form includes buttons it is no longer considered a SF

Combo box/Dropdown Field

mceclip23.png

 Example: mceclip24.png

Allows users to select from a list of predetermined options

Property Name Details
Items The list of items are defined here, where each line is a different option in the dropdown. Below is an example of a drop down that has 3 items and allows a blank value:
mceclip25.png
Style

The type of dropdown. By default it’s set to csDropDown

· csDropDown – allows the user to type into the field, even if it’s not an option in the drop down

· csDropDownList – user is only allowed to select from the list specified

 

Draw Shapes

mceclip26.png

 Example:  mceclip27.png

Used for form visuals (blocking/sectioning usually). Users cannot edit this. Most common usage is rectangle/square but has other shape options like triangle and circles

Property Name Details
BorderColor Set the colour of the border around the shape. Default is set to Black
BorderStyle

Set the look of the shape’s border. Default is psSolid. There are lots of options but the most used ones will be:

· psClear – do not display a border

· psSolid – a solid line border
BorderWidth Set how thick or thin the shape’s border should be in pixels. Default is 1
FillColor Choose the inside colour of the shape. Default is set to White

 

Picture

mceclip28.png

 Example: mceclip30.png

Used for form visuals and must be loaded with a picture to be useful. Users cannot edit this.

Property Name Details
AutoSize Determines if you need to manually adjust the frame that the image is within. Default set to False but recommendation is to set it to True
Picture How you select an image. It will open a way to browse your computers/connected network folders

 

Tips and Tricks

Alignment and Positioning

Height, width, top, and left properties can be typed directly into the field, or the number will adjust based on what you change in the form editor window. Note: the positioning between what is seen in the EMR screen and what is seen in the printed version may not match. If the form needs to be printed (most simple forms), it’s best to do the “happy medium”. Adjust the position and size for it to be presentable in both versions.

Adding character "&" 

Known issue: In Profile EMR, the ampersand (&) must be entered twice for it to display correctly. If it is entered only once, it will not appear.
 

Time Saving Shortcuts

Arrow Keys

You can use the arrow keys to move the selected element. If you hold down shift and then use the arrow keys, the selected element will adjust in size instead, as long as auto-sizing is off

Creating elements with similar properties

If there is already a form element that has the style and properties desired throughout the form, select the item and copy & paste (either using the short key or right-click option)

Using multi-select

This can be achieved by either holding down the shift key and clicking on each element or dragging the mouse across all the fields

  • Move multiple items: once selected, you can now click and hold down the mouse button on one element and then drag the all selected as a single unit
  • Duplicating entire groups of elements: copy and paste works when multiple elements are selected. It will create a copy on top of the original. You’ll need to shift + select the elements and drag (or use the arrow keys) those elements elsewhere to see the original underneath
  • Make alignment uniform: Right-click > Position > Align… Note that the first element that was selected will be the base reference when it comes to left/right and top/bottommceclip36.png
  • Make size uniform: Right-click > Position > Size… note that the first element that was selected will be the base reference when it comes to “make same as” mceclip37.png
  • Changing properties: Common properties across the selected fields will show in the Object Inspectors Properties tab. There you can change all of them to match (ex: making all selected read-only, or bolding font)

Tab order

If a user hits tab to navigate to the next available fillable input/control field, it will follow the tab order. By default, the tab order is the same order the fields were created. To adjust the tab order, right-click > Tab Order…  Note that it will display all the form’s input/control fields in a list. This is where it would be helpful to rename them using the Name property

Sending element(s) front or back

Ordering of the elements matters in terms of visibility in EMR and printing. To adjust them, you can:

  • Right-click > Bring to Front
  • Right-click > Send to Back

 

Add Spellcheck 

  1. Insert the button control  from the control pallet to the desired location on the form 
    • Button Name: btnSpellCheck
    • Caption: Spell Check
  2. In the Events tab in the Object Inspector click on OnMClick and add the macro: 
    Note: You can either offer spell check for the entire form or for a particular section 
    • Entire form: FormSpellCheckAll
    • Section: SpellCheckControl()
    • The desired macro can be found in the Profile Type Library Explorer: