User Control Object - Definition of properties

Official Content

A User Control object has the following sections:

CardCode_png

  • Screen Template: In this section, you have to include the code that indicates what to display to make up the User Control (the output).
  • Properties: They should be identified with {{  }} inside the Screen Template. Even though in general, GeneXus infers the properties directly from the Screen Template, since ambiguities may exist, they can be modified in the Properties section of the object.

Types of properties

The types of properties available are the following:

How to define properties

By default, GeneXus uses the following conventions when interpreting the Screen Template section:

  • {{Test}} --> Defines the Test property as a string.
  • {{Test:one|two|three}} --> Defines the Test property as an enumerated value and defines its possible values as one, two, three.
  • {{#Test}} --> Defines the Test property as custom; basically, any SDT is accepted.

Defining a property

To define a property, this syntax {{ }} is used. For example, to add a property called "Make," the syntax is as follows:

{{Make}}

GeneXus will assume it is a property of string type because its type hasn't been explicitly declared.

Defining a property of declared type

Continuing with the previous example, to define a type for the "Make" property, the syntax is as follows:

{{Make:<data type>}} 

Where <data type> must be one of the data types available.

In addition, to define enumerated values of Make, the declaration must be:

{{Make:Fiat|Volkswagen|Toyota|Peugeot|Renault}}

Defining a collection property

To define elements in iterative blocks, it is possible to set a property as a Collection.
So, to define for example a list of category values, the declaration would be:

 <UL>
 {{#Categories}}
    <LI>{{Name}}</LI>
 {{/Categories}}
 </UL>

The Categories property preceded by the # (sharp) character allows indicating that it is an element that can be iterated (and within this iterative element the items with their corresponding names are defined using the {{Name}} property).

Default values of a property

An initial value can be assigned to a property; to do so, the operator = (equals) must be used. The definition looks as follows:

  • {{Test="HELLO"}} --> the Test property takes the default value "HELLO"
  • {{Test:one|two|three=one}} --> the Test property, within the enumerated values that have been declared, takes the default value "one"
  • {{IsActive=true}} --> the IsActive property takes the default value "true"

Applying a condition to the value of a property

If for some reason you want to omit a certain output if a certain property has no value, a condition must be applied to the property to achieve this behavior. Properties accept the use of conditionals to achieve the above behavior. Conditionals are represented with a question mark (?).

For example:

{{AdditionalComments?}} text to include {{/AdditionalComments}}

In this case, the AdditionalComments property can be empty; therefore, it is conditioned so that if it is empty, it is not shown.

Example

The following Alert control is to be implemented:

AlertTypes_png

Its variations simply differ in the class (CSS style); it is, therefore, reasonable to think of creating a single control with an enumerated property that indicates the desired type of Alert: warning, info, success or danger. This is modeled as shown below in the Screen Template of the control:

  <div {{OnClick}} class="Alert Alert--{{Type:info|warning|success|danger}}">
  {{Text}} 
  </div> 

Then, when you place the control on the screen, you can choose the type of Alert to use.

AlertTypeSelection_png

If you pay attention to the image above, you can see that there are 5 types of Alerts. However, 4 values have been defined. The reason is that the empty value is also a possible value, and in this case, the Alert-- class doesn't have to be concatenated.
To achieve this, a condition has to be applied to the Type property value:

  <div {{OnClick}} class="Alert Alert--{{Type:info|warning|success|danger}}">
  {{Text}} 
  </div>  

As a result of applying a condition to this property, the Alert--{{Type}} class will be ignored, with only the Alert class remaining in the control.

 

Was this page helpful?
What Is This?
Your feedback about this content is important. Let us know what you think.