Tech Tip: Style Non-Current Items

Tech Tip: Style Non-Current Items

It's easy to lose track of whether you're looking at the current version of an item, especially when opening an item from a relationship or item property. This tech tip demonstrates two ways to show whether an item is current at-a-glance using form styles.

Getting Started

You can find all of the code and files for this demonstration on the Aras Labs GitHub page in the style-non-current-items project. If you want to install the project and follow along, the project page includes all of the instructions for installing the import package.

ArasLabs/style-non-current-items

style-non-current-items - Demonstrates two ways to style the form of a non-current version of an item.

How It Works

The project's import package includes two methods - labs_StyleNonCurrent and labs_NonCurrentOverlay. Both use the same basic logic to determine whether the context item is the current version.

First we check whether the context item includes the is_current property. If so, we proceed with that value. Otherwise, we retrieve the is_current property from the server. If the is_current property's value is 0, we style the form accordingly.

1. Custom Background Color

Custom Background Color for Non-Current Item

Custom Background Color for Non-Current Item

The first method in the import package, labs_StyleNonCurrent, changes the form background color to distinguish a non-current generation of an item from the current generation. Here's the method code to set the background color for non-current items:

2. Watermark Image

Custom Watermark Image for Non-Current Item

Custom Watermark Image for Non-Current Item

The second method, labs_NonCurrentOverlay, displays a watermark image over the form when the context item is not the current generation. This approach requires a hidden HTML field on the form. If the context item is not current, the method code updates the CSS properties on the hidden field to make it visible.

LOOKING FOR MORE ARAS INSPIRATION?

Subscribe to our blog and follow @ArasLabs on Twitter for more helpful content! You can also find our latest open-source projects and sample code on the Aras Labs GitHub page.