Label Use Examples

Labels can be used to put text on a page. This can be used to display text to users for forms, as headers, as content within a list section, as instructions on a page, or to display a message to the user. It can be displayed if certain conditions are met and the text of the label itself can be static or dynamic.

Using the Label and its Description Within a Form

Labels within a form work well when used with their description.

Here we have the labels used to display the values and the description is used to identify what is displaying.

 To display a description, the label must be within a section that has the descriptions set to display.

In this example, the description is static because the type of information being displayed will always be the same. However, the value itself will change based on the item, quantity, etc. You can see under the “Text/Data” property we are not using the value exactly as it is typed. Instead we are dynamically setting the text for that label depending on the values from a datasource. In this case our datasource is returning the availability of that item, so we display the availability specific to the item we are searching.

Using Labels as Headers

In this example the two circled labels are used as headers

Here is how they appear on the page

These labels are using the “Text/Data” property of the label to display the text.

Notice since we are using them as headers and do not want a description to show, we have left it blank. Also, the text that displays is exactly the text typed in the “Text/Data” property.

Additional styling can also be added under “Theme & Style” in the “Style” property.

Using Labels as Content Within a List Section

Labels are also used very commonly to display content within a list section. In this example we have a small list section with a label named ListName. This list section is used for a feature called MyLists and each List has a Name attribute.

We can see in its properties that the Description is set to “List Name”. This is usually used to populate the header row of the ListName column. However, our list section has the header row feature turned off and instead there is another section “Lists Header” above it to act as the header. We will look at another example later where that feature is turned on to see how the description is used in the list section header row.

The “Text/Data” property is dynamically pulling the ListName attribute of the lists it is displaying in the grid. It will change for each line depending on the data coming from a datasource.

We can see the Datsource this value is coming from, what node within that datasource, and the value we are retrieving.

On the page we can see each list has its name listed in regular text for the ListName column. The other two columns are a button (set to display as a link) and hyperlink so they display as links and have additional functionality when clicked.

Here is another example where the list section enabled the feature to display the header row and the Label’s Description shows through to the page.

On the webpart canvas we can see the labels used to display the text from the grid and the values saved in their “Description” property.

Using a Label as Instructions on a Page or a Message to the User

A label could be used to display static text when certain conditions are met. The shopping cart is a good example because depending on the state of the shopping cart it might want to tell the user different things.

We could accomplish this a few ways. We could just have one label whose value changed depending on the need. If we took that approach the value would be dynamic and a process would decide which text to display as the “Text/Data” depending on the conditions that were met.

In this example, we have many labels all with static text and, in a process, we hide and unhide the sections they are in depending on those same conditions.

As we look on another page, you can see labels can be used for instructions which are always visible and static text. This was used for a feature called “Scheduled Invoice Notes”. Depending on when customers received their invoice, a note would appear on the bottom of the invoice. This could remind customers that offices would be closed on holidays and the message would be scheduled to show on all invoices 2 weeks prior to the holiday.

When the admin arrives on the screen he/she would see a brief instructions on how this feature works as well as the Current Note which is active today.

Here is the “Text/Data” property for the “Instructions” label. Due to the nature of the feature, the instructions don’t need to change and they always need to be visible.

The “Current Note” label is meant to always show the note that is active today. That means the note will change based on what note is currently active. Also, as an added feature, if there is no active note for today, it will display a default message and the style will be changed so that the message displays in red.

This information is found in a datasource and some logic is added to determine the styling and default message when a current message doesn’t exist.