--- id: awe-103 title: awe-103 Criteria, grids and charts sidebar_label: awe-103 Criteria, grids and charts --- The `criteria` elements are screen components that can be used by a user to insert and select sets of data and send them to the server. They are also used to filter the data shown in the screen and to introduce or modify data. Criteria ## Criteria Criteria are defined in XML files that [generate screens](awe-102.md#generating-a-screen). In order to create a criteria,`criteria` tag is used: ```xml ``` In order to define and/or configure the criteria, we use several XML attributes. The structure to define it goes as follows: ```xml ``` Attributes **id** (internal reference) and **component** (criteria type) are **mandatory**. The rest are optional. In these links you can find all the general and specific attributes, as well as their meaning and use: - [General attributes](/api/criteria.md#general-attributes) - [Specific attributes](/api/criteria.md#specific-attributes) We can distinguish between two types of criteria: ### Data insertion #### Text criteria They are text boxes for introducing information. Text A basic text criteria example is shown below: ```xml ``` This example shows a text box with the locale "Text" on the upper part. In order to give CSS styles to the element, attribute *"style"* is used. When screen's values are sent to the server using buttons, dependencies, etc. (see [buttons](awe-102.md#buttons) and [Actions and dependencies](awe-106.md)), the value will be received in the text box in a variable with the same name as the attribute *"id"*, in this case, "TextCrt". The *"label"* attribute admits localization, meaning that locales can be defined in different languages and, depending on the one selected within the application, the corresponding one will be shown. Attributes *"label"*, *"placeholder"*, *"unit"* and *"help"* admit localization. For further information on this, see [Locales](awe-102.md#locales). With the attribute *"value"* we can set a default value. ```xml ``` Criteria with value *"value"* attribute should not be mistaken with attribute *"placeholder"*, because that is the text that appears inside of a text field before inserting anything. ```xml ``` Criteria with placeholder ##### Load a default value with the value returned by a DB query It is possible to load a default value with the value returned by a database query before the screen is loaded. For this, we should add the attribute *"initial-load"* with value *"value"* and in the attribute *"target-action"* we should say the name of the query we want to execute (it should be defined in "Queries.xml" file). The query should return two values in order to fulfill the text field, "label" and "value" (more information in [DB queries](awe-104.md#db-queries)). The value returned by the query will be loaded in the text box. *Screen* ```xml ``` *Query* ```xml ``` Criteria con value Criteria con value ##### Retrieving values from previous screen When navigating between screens, sometime we would need to retrieve values from the previous screen. To achieve this, we should use the attribute *"variable"* with the name of the variable from the previous window that we want to retrieve. ##### Validations It is possible to perform validations on the data introduced in the criteria. To do this, we should use the attribute *"validation"*. There are many validation types: numeric, by date, minimun and maximum length of data, etc. To see all validation options, check [here](https://git.almis.com/awe-team/awe/wikis/validation-3.2#validation-types). When validation action is performed, from a button for instance, validation will be checked. In case is not valid, a message will appear on screen saying that that criteria does not meet with the conditions set. Validation examples: **1. Required**. If we want the criteria to be mandatory, we should use the following validation: *Criteria* ```xml ``` *Button launching validation action* ```xml ``` >For further information on launching actions using a button, check **[Buttons](awe-102.md#buttons)** Criteria with Validation Required >Please note that required criteria have a green background. **2. Minimum length**. If we want the data introduced in a criteria to have a minimum length (in the example below, 10 characters), we should do as follows: *Criteria* ```xml ``` Criteria with Validation Required ##### Readonly To have a field with readonly information, we should use the attribute *"readonly"*. ```xml ``` Readonly criteria ##### Size It is possible to change the size of text inside of a criteria, as well as label's that comes along with it, via the attribute *"size"*. ```xml ``` Criteria with different sizes criteria ##### Units In order to show the units of criteria's value, we can use the attribute *"unit"*. ```xml ``` Criteria with units ##### Icons Representative icons may be shown next to the criteria using the attribute *"icon"*. You can check all icons available in [FontAwesome](http://fontawesome.io/icons/). ```xml ``` Criteria with icon More info: - [Text criteria](/api/criteria.md#text-criterion) - [Criteria XML skeleton & structure](/api/criteria.md#xml-skeleton) Links: - [Buttons](awe-102.md#buttons) - [Actions and dependencies](awe-106.md) - [Locales](awe-102.md#locales) - [DB queries](awe-104.md#db-queries) ---- #### Password criteria They are text boxes with hidden content, useful for passwords. Password A simple way of creating a password criteria would be: ```xml ``` More info: - [Password criteria](/api/criteria.md#password-criterion) - [Criteria XML skeleton & structure](/api/criteria.md#xml-skeleton) ---- #### Textarea criteria They are text boxes that allow multiple lines. Textarea Example of textarea generation: ```xml ``` More info: - [Textarea criteria](/api/criteria.md#textarea-criterion) - [Criteria XML skeleton & structure](/api/criteria.md#xml-skeleton) ---- #### Hidden criteria They are hidden criteria, useful for sending static data to the server. Example of a hidden criteria: ```xml ``` More info: - [Hidden criteria](/api/criteria.md#hidden-criterion) - [Criteria XML skeleton & structure](/api/criteria.md#xml-skeleton) ---- #### Numeric criteria They are text boxes where only numbers are allowed. In order to control the accepted format, it is necessary to note the restrictions with the attribute "number-format" (check documentation on numeric criteria below). Numeric It is possible to add a slider to the numeric component to help select the desired quantity. Numeric_-_Slider A simple example of generating a numeric criteria: ```xml ``` More info: - [Numeric criteria](/api/criteria.md#numeric-criterion) - [Criteria XML skeleton & structure](/api/criteria.md#xml-skeleton) ---- #### Text view criterion This criterion simply shows a text that may be recovered from a variable, parameter, query or even loaded with dependencies. Text view Example: ```xml ``` More info: - [Text view criterion](/api/criteria.md#text-view-criterion) - [Criteria XML skeleton & structure](/api/criteria.md#xml-skeleton) ---- ### Data selection #### Date criterion It is a date criterion that shows a calendar so day, month and year can be selected. Date Example: ```xml ``` More info: - [Date criterion](/api/criteria.md#date-criterion) - [Criteria XML skeleton & structure](/api/criteria.md#xml-skeleton) ---- #### Time criterion A criterion that allows the selection of hours, minutes and seconds. Time Example: ```xml ``` More info: - [Time criterion](/api/criteria.md#time-criterion) - [Criteria XML skeleton & structure](/api/criteria.md#xml-skeleton) ---- #### Filtered date criterion It is similar to the date criterion but certain dates can be filtered in order to avoid its selection. Date Example: ```xml ``` More info: - [Filtered date criterion](/api/criteria.md#filtered-date-criterion) - [Criteria XML skeleton & structure](/api/criteria.md#xml-skeleton) ---- #### Select criterion It is a select criterion with a list of values that may be selected. Select Example: ```xml ``` In this example, the select takes its values from the enumerated "demoEnum". There is the possibility to select several values with the *"select-multiple"* component. ```xml ``` Select Multiple More info: - [Select criterion](/api/criteria.md#select-criterion) - [Multiple select criterion](/api/criteria.md#multiple-select-criterion) - [Criteria XML skeleton & structure](/api/criteria.md#xml-skeleton) ---- #### Suggest criterion Allows the user to find a value writing some of the caracters of the value to be found. Suggest Example: ```xml ``` It is possible to select several values with the *"suggest-multiple"* component. ```xml ``` Suggest Multiple More info: - [Suggest criterion](/api/criteria.md#suggest-criterion) - [Multiple suggest criterion](/api/criteria.md#multiple-suggest-criterion) - [Criteria XML skeleton & structure](/api/criteria.md#xml-skeleton) ---- #### Checkbox criterion Creates a checkbox component. Checkbox Example: ```xml ``` The *"group"* attribute is used to create a group of several criteria, with a binding among them. More info: - [Checkbox criterion](/api/criteria.md#checkbox-criterion) - [Criteria XML skeleton & structure](/api/criteria.md#xml-skeleton) ---- #### Radio criterion Shows a radio criterion. With this kind of component, only one of the group may be selected. If a new item is selected, the priously selected will be unselected. Radio button Example: ```xml ``` AS with the checkboxes, the *"group"* attribute is used to create a group of several criteria that will be bound among them. More info: - [Radio criterion](/api/criteria.md#radio-button-criterion) - [Criteria XML skeleton & structure](/api/criteria.md#xml-skeleton) ---- #### Button checkbox criterion It works as a checkbox but has the appearance of a button. Button checkbox Example: ```xml ``` More info: - [Button checkbox criterion](/api/criteria.md#button-checkbox-criterion) - [Criteria XML skeleton & structure](/api/criteria.md#xml-skeleton) ---- #### Radio button criterion It works as a radio button but has the appearance of a normal button. Button radio Example: ```xml ``` More info - [Radio button criterion](/api/criteria.md#radio-button-criterion-1) - [Criteria XML skeleton & structure](/api/criteria.md#xml-skeleton) ---- #### Color criterion Obtains the hex value of a color using a color selection widget. Color Example: ```xml ``` More info: - [Color criterion](/api/criteria.md#color-criterion) - [Criteria XML skeleton & structure](/api/criteria.md#xml-skeleton) ---- #### Uploader criterion It is used to send files to the server. Once loaded, files may be managed by server tasks. Uploader Example: ```xml ``` More info: - [Uploader criterion](/api/criteria.md#uploader-criterion) - [Criteria XML skeleton & structure](/api/criteria.md#xml-skeleton) ## Grids Grid are AWE's main component for showing lists of data and they are paginated in order to help to the visualization of information. It is also possible to organize the information by pressing the column we want to use as sorting criteria. Grid example Grids are defined in XML files that [generate screens](awe-102.md#generating-a-screen). To create a grid we use the "grid" tag: ```xml ``` To define the behaviour and/or configuration of a grid, we should use the attributes defined by the XML item. The structure is as follows: ```xml ... ... ... ... ... ... ``` **Grid tag structure:** ```xml ... ``` The **id** attribute (internal reference) is _mandatory_. The rest of attributes are optional. In this _[link](/api/grids.md#general-attributes)_ you can find all the existing attributes, as well as their meaning and use. **Structure of column tag:** ```xml ... ... ``` The **name** attribute (internal reference) is _mandatory_. The rest of attributes are optional. In this _[link](/api/grids.md#column-attributes)_ you may find all existing attributes, as well as their meaning and use. More info: - [Introduction to grid creation](/api/grids.md#introduction) - [XML grid structure](/api/grids.md#xml-skeleton) - [Grids, general attributes](/api/grids.md#general-attributes) - [Columns, general attributes](/api/grids.md#column-attributes) - [Components for columns](/api/grids.md#column-components) - [Dependencies](/api/dependencies.md) ### Simple A simple grid only shows information, is not possible to modify, add or remove data. Simple grid example: ```xml ``` Grid example 1 The "grid" tag has several attributes to configure grid's creation. Here you can find more details: | Attribute | Value | What is used for? | |--------|--------|--------| | style | expand | Applies the class "expand" to the HTML element generated. It is used to apply CSS styles. | | initial-load | query | States how is the initial data load going to be. | | server-action | data | States the type of server action that will be called to load grid's data. | | target-action | QryUniTstId | References the element that will be called on server. In this case, because it is query type, the element "QryUniTstId" will be defined in Queries.xml file (click _[here](https://git.almis.com/awe-team/awe/wikis/query-definition)_ for further information) | | max | 30 | Max item number to recover per page (30). | With "column" tags, we can see several attributes to configure the creation of grid columns: | Attribute | What is used for? | |--------|--------| | label | Is the name that will appear in the column's header. _[i18n](https://git.almis.com/awe-team/awe/wikis/i18n-internationalization)_ files may be used. | | name | Is column's identifier and is used as a reference. | | sort-field | Is the field that will be used as a sorting criteria when its header is clicked. Must point to a column's name but usually will point to itself. | | align | Data's alignment. | | charlength | Column's width measured in characters. | | style | Used to apply CSS styles to the data shown in the column. | | component | The type of component used in the column. For further information click _[here](/api/grids.md#column-components)_ | | value | In this case is usd to assign a default value to "progress" component if none is assigned when data is loaded. | | server-action | Defines the server action that will be called to load the component, in this case "progress". | | target-action | References the element that will be called by the server. In this case, because is query type, the element "QryUniTstId" will be defined in Queries.xml file (check _[here](https://git.almis.com/awe-team/awe/wikis/query-definition)_ for more details. | | printable | States whether if column should be shown when printed or not. In this case, because it is set to "false", it will not. | | icon | Used to show Font Awesome icons in the column. | Here only a few attributes were shown. For further details check: - [Column attributes](/api/grids.md#column-attributes) ##### Header grouping It is possible to group several headers into another one so information can be visually classified better. To achieve this, the "group-header" attribute is used, containing the columns that we desire to be grouped. If in the previous example we group the second and third columns, the grid will look like this: ```xml ``` Grid example For more details: - [Basic grid](/api/grids.md#basic-grid) - [Header grouping](/api/grids.md#group-header-structure) ### Multiselection Multiselection grids are grid where several or even all of the rows may be selected. Generally, is used to perform actions on the selected rows, like deleting them, loop to get their information, etc. Multiselection grid If we want a grid to be multiselectable, we just neet to add the attribute "multiselect" with a "true" value. ```xml ... ``` For more information: - [Multiselection grid](/api/grids.md#multiselect-grid) ### Editable They are grids where data may be modified, which is done just in place. Editable grid For a grid to become editable we just need the "editable" attribute to be "true". ```xml ... ``` ##### Grid buttons To modify a row, it is only necessary to click it and modify the desired data. When done, we have to click the "Save row" button. However, to add or remove a row is necessary to add a button. Usually they are included inside of the grid tag and they will be shown at its footer: ```xml ... ``` The delete button has a dependency, its purpose is to activate the button only when there is a row selected. The deleted row will be that one. Add button's action is used to add an empty row in the grid, which may be used to add new values. You can also add context buttons that will be shown when right clicking. To achieve this, instead of "button" tag, "context-button" should be used. ```xml ... ... ``` Editable grid. Context buttons > _**==*IMPORTANT:*==**_ In order to store the changes in the database, a server action pointing to a maintain should be invoked. For further info check: - [Editable grid](/api/grids.md#editable-grid) - [Grid - buttons](/api/grids.md#grid-buttons) - [Context menu](/api/context-menu.md) - [Maintain](/api/maintain-definition.md) ### Multioperation Multioperation grid is an editable grid that can perform several operations at the same time over a dataset. To create it, the attribute "send-operations" should be set to "true". ```xml ... ``` All operations will be sent to the server at the same time to be processed. Multioperation Grid > _**==*IMPORTANT:*==**_ In order to store the changes in the database, a server action pointing to a maintain should be invoked. Para más información ver: - [Multioperation grid](/api/grids.md#multioption-grid) - [Buttons in grids](#grid-buttons) - [Maintain](/api/maintain-definition.md) ## Trees A tree grid is a special kind of grid that can be expanded as a tree. Different definitions of trees can be made, we can talk about standard trees, load trees, editable trees, multioption trees and combinations of them. With this data structure, each row needs an identifier and its parent's (unless it's a root row, then parent's identifier is empty). The id should be defined in "tree-id" attribute and parent's in "tree-parent". Tree Grid ###### Treegrid example A simple example of a tree grid would be the following one: TreeGrid - demo ```xml ``` | Attribute | What is used for? | |--------|--------| | treegrid | Configures the grid as a treegrid | | expand-column | Name of column to be expanded. | | tree-id | Defines treegrid's identifier | | tree-parent | Defines treegrid's parent identifier | | initial-level | Initial level to expand | ##### Editable treegrid For a treegrid to be editable the attribute "editable" should be set to "true". ```xml ... ``` Tree Grid Editable In order to add buttons to remove or add new rows, we should do the same as with normal grids. Check _[Grid buttons](#grid-buttons)_. For more information: - [Tree Grid](/api/grids.md#tree-grid) - [Editable Tree Grid](/api/grids.md#editable-grid) - [Grid buttons](#grid-buttons) ## Charts AWE uses Highcharts library for chart render. This Javascript library allows to build many different kinds of dynamic charts in an easy, quick and flexible way. It is standalone and compatible with most of modern browsers with a high performance. XML structure to generate a chart is as follows: ```xml ``` ###### Line chart example Line chart The following XML code generates the previous chart: ```xml ``` | Attribute | Label | What is used for? | |--------|--------|--------| |subtitle|chart|Chart subtitle| |type|chart|Chart type| |zoom-type|chart|Decides in wich dimensions the user may zoom in| |label|chart-legend|Legend's title| |label|x-axis|Label over x-axis| |type|x-axis|Axis type. May be "linear", "logarithmic", "datetime" or "category"| |label|y-axis|Label over y-axis| |formatter-function|y-axis|Javascript function to format axis' labels| |opposite|y-axis|Shows the definition of that label on the right side| |label|y-axis|Label over y-axis| |crosshairs|chart-tooltip| Axis visualization to connect the points with their corresponding values in the axis| |suffix|chart-tooltip|Suffix that is shown over chart's tooltip| |number-decimals|chart-tooltip|Suffix that is shown over chart's tooltip related with decimal numbers| |shared|chart-tooltip|Shared information for several charts| |y-axis|chart-serie|When double or multiple y axis are used, this number specifies to which xAxis the series is connected to. It's the axis' identifier| |x-value|chart-serie|Defines the value of the x axis point| |y-value|chart-serie|Defines the value of the y axis point| |type|chart-serie|Series type| |label|chart-serie|Name of series. This value is shown in the legend| |color|chart-serie|Series' color| For more information check: - [Charts](/api/chart.md#chart-development) - [Chart XML structure](/api/chart.md#xml-skeleton) - [Chart element](/api/chart.md#chart-element) - [Axis elements](/api/chart.md#axis-element) - [Axis formatting function](/api/chart.md#axis-function-formatter) - [Legend element](/api/chart.md#legend-element) - [Tooltip element](/api/chart.md#tooltip-element) - [Serie element](/api/chart.md#serie-element) - [Chart-parameter element](/api/chart.md#chart-parameter-element) - [Series and queries concepts](/api/chart.md#series-and-queries-concepts) - [Chart examples](/api/chart.md#examples) - [Advanced chart concepts](/api/chart.md#advanced-chart-concepts)