Widget: Image Display

The Image Display widget displays a selected image on a defined Target Type: the Home page, any single-form dataform header, or a workspace landing page. (See Adding widget layouts for details on adding a new widget layout and a description of each Target Type.)

Optional configuration allows you (i.e., the Global Administrator) to also associate a link with the image so that when the image is clicked, a separate browser tab opens to the location. The link source can come from a field on a dataform or it can be specified in the URL field of the widget layout.

Note: When you configure the widget layout, you are responsible for sizing the widget and selecting a placement that allows the image dimensions to display properly.

To configure the Image Display Widget:

  1. Go to System Admin > Widget Layouts.

  2. Click Add Widgets to add a new widget layout or click (Open) next to an existing layout in the grid to edit the widget layout.

  3. On the Widget Layout Details window, click the Add Widgets button.

    The Widget Library window displays.

  4. Click Image Display and then click Add Widgets as shown in the example screen below:

    The Widget Library window closes. An Image Display widget control displays on the Widget Layout Details screen.

  5. Drag the bottom right corner of the widget control to dimensions that will properly display the image. (Once you finish configuring the widget and test how the widget renders in the target location, you may need to adjust dimensions to ensure the image displays properly.)

  6. Click the Settings button on the Image Display widget control.

    The Widget Settings window displays. This is where you point to the location of the image that displays in the widget and where you define hyperlink details (if you want the image to be used to open a web location when the image is clicked).

  7. Complete the following fields as applicable. Some fields display or hide according to their relevance as you make selections. Therefore, all of the fields listed here may or may not display as you configure the widget.

    Location

    Defining an image Location is the starting point as you drill down from an initial image location to the exact file upload field containing the image you want to display in the widget.

    • Current Workspace - Select this option to allow the system to dynamically reference the dataform and file upload field of a currently accessed workspace as the image source.

       

      Example Use Case: You have added a widget layout with a Target Type of  Workspace. You want the Image Display widget on the workspace landing page to change dynamically for users depending on which workspace is open and always show the logo of the current accessed workspace. To do this, select Current Workspace in the Location field. Specify a single-form dataform in the Dataform field, such as the Client Master, and then select the file upload field containing the logo in Field. For the desired outcome to occur, the following must be true:

      • The specified dataform must exist for each workspace.

      • The specified file upload field must exist on each workspace.

      • The specified file upload field must used solely for storing a logo image for each workspace and cannot be empty or blank.

      If all requirements are met, the result of this setup is that each time a user accesses a workspace (i.e., the "Current Workspace"), the logo for the current workspace displays in the Image Display widget on the Workspace Landing page.

     

    • Other - Select this option to set the dataform and file upload field of a specific workspace as the image source. When you select this option, the WSID field becomes available and is required. You must enter a workspace ID in the field.

       

      Example Use Case: You have added a widget layout with a Target Type of Home. There is a static image that you want to always display on the ClientSpace Home page. To do this, select Other in the Location field. Specify the workspace ID in the WSID field. Select a single-form Dataform , such as the Admin Workspace, where you are storing the image for the Home page and then select the file upload field containing the image in Field. For the desired outcome to occur, the following must be true:

      • The workstation ID must be valid.

      • The specified dataform must be valid on the workspace

      • The specified file upload field must exist on the workspace.

      • The specified file upload field must contain a file with an image data type and cannot be empty or blank.

      If all requirements are met, the result of this setup is that each time the ClientSpace Home page is accessed, the selected image always displays in the Image Display widget.

    WSID

    WSID is active only when a Location of Other is selected. This field allows you to pick a specific workpace ID as the image location. See the example use case in this table under Location.

    Dataform

    Select the Dataform where the image is located.

    Note: The selection list is filtered to display only single forms as multi-forms are not permitted for this configuration.

    Field

    Select the file upload Field where the image is located.

    Note: The selection list is filtered to display only file upload fields.

     

    If the selection list is empty, no file upload fields exist for the selected Dataform. Selecting a file upload field that does not contain an image data type or is empty results in an error message displaying in the widget frame. "See the Troubleshooting: Error Message Meanings" section for details.

    Hyperlink Location

    Optionally, pick a Hyperlink Location if you want a web location to display when the image is clicked. Select one of the available options:

    • Field (on same form) - Select this option if the external link is stored in a field located on the selected Dataform. When you do this, Link Field displays as a required field. Click the down arrow in Link Field and select the dataform field containing the external link details.

    • Hardcoded - Select this option to type the web URL for the link. When you do this the URL field displays. Type the external link details in this field.

    Link Field

    Link Field displays when the Hyperlink Location is set to Field (on same form). Click the down arrow in Link Field to point to a dataform field that contains the external link details. This location displays in a separate browser tab when the image is clicked.

    URL 

    URL displays when the Hyperlink Location is set to Hardcoded. Type external link details in this field. This location displays in a separate browser tab when the image is clicked.

  8. When finished configuring the Image Display widget, click Save.

    You are returned to the Widget Layouts list. If your widget layout is new, it is displayed in the list as unpublished. (A new layout is displayed in italics and bold – meaning it is unpublished.)

  9. To publish a new widget layout, select the Published option in the far right column.

  10. Test the widget by going to the target location identified in the Widget layout (i.e., the Home page, a single form dataform header, or a workspace landing page) and adjust the widget control frame as necessary to ensure proper display.

Troubleshooting: Error Message Meanings

The error messages below display in the widget control frame in red letters when the value in the Field setting is invalid or missing.

Error

Cause

Solution

Unable to Display, not an image file type.

The file stored in the field that is being referenced in the Field setting is not a recognized image data type of .gif, .jpg, .jpeg, .png or .tif.

Upload an image file with a recognized image file type.

No Image to Display.

There is no file present in the field that is being referenced in the Field setting.

Upload a valid image file.

Related Topics: