Top
Top
LibraryEASYProcess Reference ManualWebPartsFieldsLabel
KLabel Use Examples
Field:Label

Appearance

AllowSorting

This property is only used when the field is in a list section. If AllowSorting is set to ‘True’, then the list will display a sort option at the top of the field column in the lest. This sort option can be selected and the list will be sorted on that column. To make a field the default sorting option for a section set the sections property SortField to the field.

Description

When the field has a Description, the text here displays in that description. Blank and spaces are accepted values for this property.

Whether a not a field has a description is determined by the section the field is in. Each section has a property called “Field Description” which has options to either not display a description (Field Description: No) or where it should be displayed in relation to the field (Field Description: left, right, top).

Format

This is where you can set the format rules for the text/numbers the label is displaying. There is a pre set option: {0:###,###,##0.00}. This adds commas to numbers every 3 digits and only allows numbers to be displayed. However, you can write your own custom numeric format string or edit the provided option.

MaxTextLength

This is how many characters can be displayed. This is only for fields which accept text input. The text will be cut off at the limit.

OverrideRender
Text
ToolTip

If this property is not blank, the text entered here is displayed in a message when the user hovers over the field.

TranslateFormula, TranslateParams

The TranslateFormula property has a few preset date translations options that can be used if the label value is in a date format. Options are: “ConvertFromJDEDate”, “ConvertToJDEDate”, “From JDEUDCDesc”, and “ToJDEUDCDesc”.

Enabled, RenderIfNotVisible, Visible

Basic Properties

Active
IdMode

IdMode determines the id that the field gets when it is put on the page.There are two options: Default and NameOnly. Default set the id to [FieldName]@[WebPartId]@[index]@[index]. NameOnly sets the id to [FieldName].


Download

DownloadMode

Globalization

Translate

Translate can be set to ‘True’ or ‘False’ if set to ‘True’ when the language is switched from the default language the field contents will be translated. If set to ‘False’ it will not be translated.


Layout

DescriptionHorizontalAlign, DescriptionVerticalAlign, FieldDescriptionHeight, FieldDescriptionWidth, Height, HorizontalAlign, tabindex, VerticalAlign, Width

The horizontal alignment of the field description is controlled by DescriptionHorizaontalAlign and can be set to left, center, or right

The vertical alignment of the field description is controlled by DescriptionVerticalAlign and can be set to top, middle, bottom, or baseline

The horizontal alignment of the field is controlled by HorizontalAlign and can be set to left, center, or right

The vertical alignment of the field is controlled by VerticalAlign and can be set to top, middle, bottom, or baseline

The height of the field description is controlled by FieldDescriptionHeight

The width of the field description is controlled by FieldDescriptionWidth

The height of the field is controlled by Height

Control the tab order by setting the Tabindex of each field.

The width of the field is controlled by Width


Responsive Design

RWDVisibility

These two properties are used for adaptive design for phone display.

RWDAutoFormat : By default EASYProcess will does auto format for a control for adaptive design. For example, section NoOfColumns will always be set to 1 for phone display. By making RWDAutoFormat to false, you can stop such format from happening automatically. This property is only available at WebPart and Section level.
RWDVisibility : Its value can be All, Desktop, Phone. ‘All’ means this control will display in both desktop browser and phone. Desktop will force this control to display in desktop browser, Phone will force this control to display in phone browser. If value is blank, then it will default to ‘All’.


Style

CellStyle, CssClass, FieldDescriptionStyle, SkinId, Style
  • SkinId : A skin is a predefined collection of classes for a particular control. Once a SkinId is specified for a control, a set of classes in that control will be automatically set. For example, Class in Label will be ‘Label-<SkinId>-Class’. Every control defaults to SkinId = ‘Default’. You can have multiple skins for a particular control but only one can be applied at a time. Values for these classes are specified using EASYProcess CSS feature. To understand how CSS and Skin Id works review document here.
  • Class : By making SkinId blank, you can use your own class name. Make sure you define class name in your own CSS or using EASYProcess CSS feature.
  • Style : Apply inline styling using this property. Any value specified here will be applied directly. You can use EASYProcess style builder to create style string.
  • DescriptionStyle : Use this property to style description of this control.
  • CellStyle : Use this property to style container cell for a control.
  • To style other elements in this control, which are children of this control, use CSS selectors for children.

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.


Powered by EASYProcess (© 2019 K-Rise Systems, Inc).