Summary

Most images (such as JPG, GIF, or PNG files) are associated with an application and so are properly saved in binary file rules. Use of rules to hold images provides security, versioning, and packaging.

In unusual situations, you may want to store an image as a data instance, rather than in a rule. This article presents an example use of the Data Content data instance and the contentURL JSP tag.

Suggested Approach

Use binary file rules to store images in the normal situation that the image may change from time to time and is associated with an application. Use of a rule (rather than a data instance) provides all the benefits of rule resolution — versioning, history, ease of packaging, and many others.

Use content image data instances (Data-Content-Image class), rather than binary file rules, in the unusual case that the images themselves change only rarely, and are not directly associated with an application. Use the contentURL JSP tag to retrieve and display the image.

For example, from the General tab of an Operator ID form, you can upload a photograph or other image to represent the person. The system creates an image content data instance to hold the image, separate from the Operator ID data instance.

If your system needs to display images that meet the criteria for content image data instances, follow the development steps described here.

Scenario

NorEasterBank has 12 divisions that exactly correspond to eastern United States states, including Maryland, Delaware, Virginia and others. Customer service staff are physically in one building, but each works only for a single division.

Although each user's portal identifies their division, use of a graphic image allows easily recognized identification, even when passing by several feet away from the monitor.

All NorEasterBank applications are enterprise wide; there are no divisional applications and no RuleSets for specific divisions.

Step 1: Create images

To add image content instances to the system, use Adobe Photoshop or another graphics tool to create a JPG, GIF, or PNG image. (Do not use BMP files.)

NorEasterBank uses state flags to identify each division, plus a catchall "flag" that covers special situations:

Delaware

Maryland

(More...)

Other

Step 2: Upload each image to an Image Content instance

An image content data instance has three key parts; the file name, the file type, and an arbitrary "path" final key part. Include a single forward slash character as the first and last characters of the third key part.

Image content instances are part of the Technical category. Select New > Technical > Image Content to access the new dialog. The form is similar to the binary file rule form (without RuleSet, version, availability and other rule details).

Click Upload File to locate and upload the image file into the data instance.

Save the form. (Depending on your Internet Explorer browser state, the image preview may be visible, visible but stale, or not visible.) Consult the help system for additional options on this form.

Step 3: Include the image into a stream with the contentURL tag

In this example, a developer created a hand-crafted — that is, not auto-generated —section rule named ShowDivisionFlag to contain the JSP tags. At runtime, the stream-processed <pega:contentURL > JSP tag "serves" the image to the user browser.

Through <pega:when > and <pega:choose> JSP tags, the Maryland division flag appears when the requestor belongs to the Maryland division, the Delaware flag appears for the Delaware division, and so on.

Consult the help system for details on the JSP tags for your version.

Next, the developer overrode the standard section rule @baseclass.News, part of the User composite portal.

Inserted below the existing two cells of the News layout, a third row referenced the ShowDivisionFlag section.

Step 4: Test

In the user portal, when the user belongs to the Maryland division, the Maryland flag appears.