LogoLogo
WEM ModelerWEM ReferenceTutorialsMyWEM
  • WEM Platform Documentation
  • Getting Started
    • Introducing WEM
    • Create WEM Account
    • WEM Login
    • MyWEM Portal
      • MyWEM Features
      • MyWEM Support
      • Allow Support Access
    • Partner Portal
  • WEM Modeler
    • Introducing the WEM Modeler
    • Modeler Start Page
    • Manage Projects & Workspaces
    • User Roles Scheme
    • Create a new Project
    • Modeler Application Overview
    • Project Settings
      • Project Configuration
      • Security Settings
      • Portal Settings
      • SMTP Settings
      • Mobile App Settings
    • Expression Editor
    • Flowcharts
      • User Interaction
      • End Node
      • Sub-flowchart
      • Navigation
      • Clear session
      • Decision
      • Assignment
      • List Action
      • Loop
      • Copy Data
      • Save and Discard
      • Import Data
      • Export Data
      • Invoke Webservice
      • HTTP Request
      • Execute Process
        • Different processes explained
        • Send Email
        • Change settings
        • Changing files
        • Generate File
      • Ping server
      • Authenticate
      • Comet Messages
      • OpenAI
      • Async Tasks
      • Note Node
    • Data Model
      • WEM Session Folder
    • Services and Integration
      • Webservices
      • Remote Data Sources
      • Authentication Providers
        • SAML 2.0
          • SAML App Registration in EntraID
        • OAuth 2.0
      • Comet - Real Time Messages
      • Certificates
    • Concepts and Concept Queries
      • Concepts
      • Concept Queries
      • Concept Relations
    • Navigation
      • HTTP Endpoints
      • Tasks
    • Files and Assets
      • Widget Libraries
      • Template Fragments
      • Files
      • Hyperlinks
    • Multilanguage Dictionary
    • Agentic AI
      • WEM AI Agent
      • AI Flowchart Nodes
      • AI User Interaction
    • WEM Preview
    • WEM Runtime
      • Publishing Process
      • Staging
      • Live
    • Debugging
  • Template Editor
    • Interaction Template Editor
      • Interaction Template Hotkeys
    • General and preview
    • Style
      • Heading Type
      • Paragraph Style
      • Text Styling
      • Alignment
      • Hyperlink
      • Tooltip
    • Layout
      • Adaptive columns
      • Div
      • Panel
      • Alert
      • Table
      • Image
      • Icon
      • Label
    • Interaction
      • Form
      • Validation
      • Required field
      • Button
      • Dropdown
      • Free form item
    • Miscellaneous
      • Tabbar
      • Google maps
      • Nested template
      • Script
      • Reference
      • Conditional
      • Data grid
      • Repeater
      • Rich text
      • Custom
    • WMT Tool
  • WEM Reference
    • WEM Expressions Reference
    • Functions
      • Aggregation
        • Average
        • Count
        • First
        • Last
        • Max
        • Min
        • Sum
      • Concepts
        • ConceptId
        • Description
        • FindConcepts
        • GetAncestors
        • GetChildren
        • GetDescendants
        • GetParent
        • Intersection
        • LocalName
        • Synonyms
        • ToConcept
        • Union
      • Date
        • Date
        • DateDiff
        • DateOnly
        • DatePart
        • DayOfWeek
        • FromUnixTimestamp
        • MoveDate
        • Now
        • TimeOfDay
        • Today
        • ToDuration
        • ToLocal
        • ToUnixTimestamp
        • ToUTC
        • UTCNow
        • UTCToday
      • Environment
        • ApplicationId
        • CountryCode
        • CountryName
        • Hostname
        • IpAddress
        • IsFirstRequest
        • IsHttps
        • IsPreview
        • IsStaging
        • IsLive
        • NodeTrail
        • PortalId
        • PortalName
        • ProjectId
        • ProjectName
        • ProjectVersion
        • Setting
        • UrlPath
      • Files
        • FileName
        • FileSize
        • FileUrl
        • MimeType
      • Lists
        • Distinct
        • IsNewRow
        • IsOnRow
        • List
        • NameOf
        • RowId
      • Math
        • Abs
        • Ceiling
        • Cos
        • Distance
        • Exp
        • Floor
        • Log
        • Log10
        • Pi
        • Pow
        • Random
        • Round
        • Sin
        • Sqrt
        • ToNumber
      • Security
        • AesDecrypt
        • AesEncrypt
        • AesIv
        • AesKey
        • CreateJsonWebTokenH256
        • HmacSha256
        • Md5
        • Password
        • PasswordStrength
        • Pbkdf2
        • Sha1
        • Sha256
        • Totp
      • Text
        • AsText
        • Base32ToText
        • Base64ToText
        • CompareFuzzy
        • Concat
        • Contains
        • FormatDate
        • FormatDuration
        • FormatNumber
        • Guid
        • HexToText
        • HtmlAttributeEncode
        • HtmlEncode
        • IndexOf
        • JavascriptEncode
        • JsonEncode
        • Length
        • Padl
        • Padr
        • RegExIsMatch
        • RegExMatches
        • RegExReplace
        • Replace
        • Split
        • StringPart
        • SubString
        • ToBase32
        • ToBase64
        • ToBase64Url
        • ToHex
        • ToLower
        • ToRichText
        • ToString
        • ToTitleCase
        • ToUpper
        • Trim
        • UrlDecode
        • UrlEncode
        • XmlAttributeEncode
        • XmlEncode
        • XPath
        • XPathList
        • XPathNumber
      • Validation
        • HasValue
        • IsEmpty
        • IsKnown
        • IsUnknown
        • IsValidBankaccount
        • IsValidBSN
        • IsValidBTW
        • IsValidEmailAddress
        • IsValidIBAN
        • IsValidPhonenumber
        • IsValidURL
      • Localization
        • AvailableLanguages
        • CurrentLanguage
        • CurrentTimezone
        • LanguageStrategy
        • Languages in WEM
    • Keywords
      • Contains
      • Concepts
        • Ancestor of
        • Child of
        • Concept
        • Descendant of
        • Overlaps
        • Range of
        • Parent of
        • Contains
      • Environment
        • ApplicationRoot
        • Platform
      • Lists
        • In
        • Of
        • Where
        • Contains
        • All
      • Logic
        • And
        • Not
        • Or
        • Choose
        • If Then Else
      • Mobile
        • BatteryLife
        • BuildVersion
        • ConnectivityTypes
        • DeviceId
        • DeviceName
        • IsDevelopmentBuild
        • IsDistributionBuild
      • Text
        • Contains
        • Ends with
        • NewLine
        • Starts with
    • Operators
      • Addition +
      • Division /
      • Equality =
      • Equality-strong ==
      • Greater-than >
      • Greater-than-or-equal >=
      • If-unknown ?
      • Inversion -
      • Less-than <
      • Less-than-or-equal <=
      • Logical-and &, and
      • Logical-not !, not
      • Logical-or |, or
      • Modulo %
      • Multiplication *
      • Power ^
      • Subtraction -
      • Unequality <>
    • Data Types
      • Text
      • Number
      • Yes / No (Boolean)
      • Date Time
      • Duration
      • File
      • Rich Text
      • Concept
      • Conceptset
      • Reference
    • SQL Compatibility
      • Functions
      • Keywords
      • Operators
    • Content Security Policy
    • WEMScript for Custom HTML
    • WEM Widgets
      • WEM Widget Structure
      • WEMScript for Widgets
      • Widget Editor
      • Content Placeholder
    • WMT
      • File Structure
      • Basic Functional Template
      • Styling
      • Font Icons
      • Reference
        • Breadcrumb
        • Button Bar Buttons
        • Common Scripts
        • Common Styles
        • Conditional
        • Content
        • CSP
        • CSP Nonce
        • Expression
        • Hidden Fields
        • Language Select
        • Navigation
        • Node ID
        • Node Name
        • Placeholder
        • Placeholder Conditional
        • Startup Scripts
        • Template Fragment
        • Uses
    • Regression Test Framework
      • WEM Test Script
  • Tutorials
    • Tutorials
      • Making a Change Log
      • Placeholders for end-users
    • First Application
      • Expand First Application
    • Video Tutorials
      • By Partners
      • Security
    • Building Widgets
      • Basics
        • 1. Introduction
        • 2. Hello, World!
        • 3. General
        • 4. Properties
        • 5. Events
        • 6. Styling
        • 7. View State
        • 8. Resources
        • 9. Placeholders
        • 10. Template Editor Script
        • 11. Global Scope
        • 12. Risks and Responsibilities
        • 13. Conclusion
      • In-depth
        • 1. Introduction
        • 2. Platform Availability
        • 3. Development Workflow
        • 4. Properties
        • 5. View state
          • 1. Runtime.viewState
          • 2. sessionStorage
          • 3. Summary
        • 6. Styling
        • 7. Events
          • 1. Navigation
          • 2. Row position
      • WEMscript
        • 1. Introduction
        • 2. Variables
        • 3. Properties
        • 4. OutputId()
        • 5. Register Input - Required
        • 6. Encoding
        • 7. Script Block - Introduction
        • 8. Types
          • 1. Boolean
          • 2. Concept
          • 3. ConceptSet
          • 4. Datetime
          • 5. Duration
          • 6. File
          • 7. Number
          • 8. Richtext
          • 9. Text
        • 9. Script Block - Global Scope
        • 10. Script Block - ES Modules
        • 11. CSS - attachShadow
      • Examples
  • Tips and Tricks
    • Tips and Tricks
      • Keyboard Shortcuts
      • Video's in WEM
      • Extracting text from File
    • Custom Hostnames
    • FAQ
    • Expressions
      • Order of Operators
    • Processes
      • Email Process
      • Tips for creating PDF's
      • ZIP Archive Process Node
    • Concepts
      • Concepts and Runtime
    • Working with data
      • The Power of the Calculated Field
      • Consuming your OData source with Excel 2016
      • Expose your data via OData
      • Using OData to transfer data between runtimes
      • WEM Storage Options
    • Integration
      • Integrating external systems
      • Json
      • Single Sign-on
      • Office365 Integration
    • Performance
      • Performance Tips
      • Performance Profiler
      • Template Performance Profiler
      • The Split Loop
    • Security
      • 2FA with TOTP
      • Blacklist or whitelist IP addresses
    • Widgets
      • Advanced Charts
        • Boxplot Chart
        • Brush Chart
        • Bubble Chart
        • Candlestick Chart
        • Card with Chart
        • Effect Scatter Chart
        • Heat Map
        • Line, Area and Bar Chart
        • Map-Bar Morph
        • Mix Time Line Chart
        • Nested Pie Chart
        • Polar Area Chart
        • Polar Bar Chart
        • Profit Chart
        • Radial Bar Chart
        • Radial Bar Gauge
        • Range Bar Chart
        • Rosetype Pie Chart
        • Sankey Energy Chart
        • Scatter Chart
        • Scatter-Aggregate-Bar Chart
        • Stacked Columns Chart
        • Stepline Chart
        • Treemap
      • Advanced Input
        • Color Picker
        • Conceptset Image Selector
        • Google maps locator
        • Multi select input button
        • MultiFile Upload
        • On/Off switch
        • Process Arrow Steps
        • Rate
        • Rating view
        • Single select input button
        • Slider
        • Tree
      • Template Actions
        • Follow exit
      • Global widgets
        • Agenda
        • Audio Player
        • Calendar
        • Draw Signature
        • Grid Widget
        • Image capture
        • Kanban Board
        • Path
        • Progress Bar
        • reCAPTCHA
        • Timeline
      • Document widgets
        • Json Viewer
        • PDF Viewer
    • Various
    • Go to MyWEM
Powered by GitBook
On this page
  • Introduction
  • Properties
  • Modifying Datagrids
  • Illustration

Was this helpful?

Export as PDF
  1. Template Editor
  2. Miscellaneous

Data grid

PreviousConditionalNextRepeater

Last updated 3 months ago

Was this helpful?

Introduction

This widget lets you display data from a list (database list / transient list) on to the user interaction screen, in a datagrid (that is, a table). The Datagrid displays a table where each row corresponds to a record in the specific list and each column corresponds to a field in the specific list.

Properties

Data source - This shows the list corresponding to the Datagrid that you want to display.

Filter - By default, the Datagrid shows all the records in the selected list. You could however show a filtered list, by selecting a pre-configured filter.

Illustration for Filters

For example, let's try to build a search filter that would allow to enter a text and then show a filtered list that contains the text that was entered.

  • Create a session variable of type 'text', that can be used as a search field.

  • Create a filter under the database list 'Clients' that filters projects with name containing the value in the above session variable.

  • Drag the text session variable and add a form at the top of the table, and the change the label as desired. Don't forget to set the Behavior: On change property of the form to Refresh screen.

  • Select the datagrid and then in the properties panel, click on the icon next to the field under 'Filter' and select the datalist filter from the overlay that is shown. Click 'Ok'.

  • 'Save' the interaction template editor and preview.

Filter expression - This is no different from the Filter property, except that you do not select a database filter like you did above, but write the filter expression in the expression editor directly. This could be useful when you are using a database filter using the above Filter property, where the specific filter is used in multiple other places, but you would like to add additional filter criteria that is needed only for the specific Datagrid. Filter expression can also be used without using the Filter property. If both of the properties are used, the expression in the Filter will be AND'ed with the Filter expression.

Enable paging - This is a toggle, which when enabled, will show x rows in one page, where x is the value configured in the Paging properties: Page size property; When disabled, all the rows in the list will be shown in one single page.

Exercise caution in toggling this property off. When the database size is huge, each time the page is refreshed, all the rows will be fetched in one go, which might not be desirable performance-wise. It is always recommended to use paging for user interaction screens.

If you are using a datagrid in a Template Editor that is intended to serve as the body of an email or a document, never enable paging. Unlike a user interaction screen, you cannot interact with a Data grid to page forward/back in a table in an email body or a document.

Paging properties: Page style - Paging properties are applicable only when Enable paging property is On. Page style property determines how the page scroller appears at the bottom of the datagrid. There are three options possible - With lables (default option), Compact, Hidden.

Illustration for Paging properties: Page style
  • Page style = With labels (default option)

  • Page style = Compact

  • Page style = Hidden

Paging properties: Page size - Paging properties are applicable only when Enable paging property is On. Page size property determines how many rows should be shown per page in the Datagrid. The default value is 20 rows.

Paging properties: Page field - Paging properties are applicable only when Enable paging property is On. Page field can be used to set the current page of the Datagrid from a numeric field in the data model.

Illustration of Paging properties: Page field
  • Search filter executed from Page 1.

  • Result set is less than 1 page long. So, all results are shown in the current page, which is page 1.

  • Search filter executed from Page 2.

  • Control is still on Page 2, but result set is in Page 1.

The behavior can be improved for this scenario by always showing Page 1 when the search filter is applied.

  • In the Template Fragment for 'Clients', change the behavior of the Form field so that it invokes a flowchart on change. The flowchart should initialise the a numeric session variable page number to 1.

  • Then assign the numeric session variable to the Page number property of the Datagrid.

  • Now, even when the search is performed from Page 2, the search results are always shown Page 1 first.

Behavior: Default sort column - This property allows you to indicate which column should be sorted in the Datagrid, by default.

Note that you can only indicate which column you would like to be used to sort the Datagrid, and not how you want the column to be sorted - ascending or descending. You can indicate that within each column.

Illustration of Behavior: Default sort column
  • In the Datagrid properties panel, select 'Column 1' as the Default sort column in order to sort the Datagrid based on the client name.

  • Then, select the first column in the Datagrid. The selected column is shown in amber outline and there is now a properties panel specific to this column. 'Sort by' can be used to configure one or more criteria based on which this column can be sorted. By default, each column is sorted in the ascending order of the colum. This can of course be changed, and more criteria can be added as desired.

Not all datatypes work well with sorting which can be resolved
by using ToString() in the sorting-field expression. 
Select the field and add the ToString() in the expression editor. 

Keep this in mind when you want to sort by rich text field or sort by concept. 

Behavior: On row click - This property can be used to indicate what should happen when you click on a row in the Datagrid. When a row is clicked, the specific record is selected from the list. With this property, you can customise what you would like to do with the selected record. There are five options possible:

  • Refresh screen - A possible application of this could be when the Datagrid shows only a limited set of columns from the list, but clicking a row should show more fields for the selected row, in the right side of the table.

  • Execute flowchart - A possible application of this could be to when the Datagrid shows only a limited set of columns from the list, but clicking a row should show more fields for the selected row, in an overlay.

  • Do nothing (default)

Appearance: Highlight row when - This property can be used to highlight a row based on specific conditions that you can add in an expression.

Appearance: Alternating rows - This property can be used to change the table style to enable/disable rows shown in stripes.

Illustration for Appearance: Alternating rows
  • Alternating rows - disabled

  • Alternating rows - enabled

Appearance: Show header - This property can be used to show/hide column headers.

Appearance: Bordered - This property can be used to show/hide borders.

Appearance: Condensed - This property can be used to add/not add padding between rows.

Illustration for Appearance: Condensed
  • Condensed - Disabled

  • Condended - Enabled

Appearance: Responsiveness - You can choose from one of the three options on how responsice the datagrid should be.

  • Stretch - This is the default responsiveness setting. This will try to fill the available space optimally, without showing scrollbars within the Datagrid. This is suitable when there are not too many columns in the Datagrid.

  • Scrollbar - This option inserts a horizontal scrollbar at the bottom of the table, if columns and content need more space than is available.

  • Column Break - This option should be used carefully. It tries to break rows and put columns on a next line if space is limited, which could yields unexpected and sub-optimal results.

Appearance: Grid width - This property can be used to set the width of the Datagrid, which is default 100% (using all available space of the parent container in which the Datagrid is placed).

Modifying Datagrids

After adding a Datagrid, you can still do many changes to it like inserting a column, deleting a column, or rearranging column positions.

  • To insert a column, drag the field from the data model into the datagrid at the desired position. You will see a green vertical line as shown below. You can let go now. The column will be inserted at that position.

  • To insert a column not from the data model, hover over the top right corder of a column border. The column borders will now turn blue, and you will see a '+' symbol. Clicking on the '+' will insert a blank column after this column. If you want to insert a blank column as the very first column, hover over the top left corder of the column border of the first column and then click on the '+'.

  • To delete a column, hover over some place close to the column border. The column borders will now turn blue. Click and then the column is selected. The selected column now is shown with amber borders. Press 'Delete' or 'Backspace' key on your keyboard to delete the column. You might have to press the keys twice to completely remove the column from the Datagrid.

  • To change the position of a column, hover over the column border and click, which turns the column border amber. You will also see three dots at the top centre of the column border. Hovering over that will show a right and a left arrow. Click on the appropriate arrow to move the column to the right or to the left.

Illustration

We had already used Datagrids for showing the list of clients, list of projects and list of employees in many of the earlier pages in our EMS use case. Let us revist the 'Clients' Template Fragement that we had built in the earleir page for 'Nested template'.

This is what we had. Let's delete the Datagrid and add it again, going through the steps more in detail this time.

  1. Let's assume you have a blank canvas (Template Editor).

  2. In the Template Editor, click on the 'Datagrid' icon and drag it to the canvas. This would prompt you to select a list.

  3. For our example, select the 'Clients' list from the tree and click on 'Ok.

  4. Instead of steps 2 and 3, there is another way of adding a Datagrid to the Template Editor. Drag the list from the data model tree into the Template Editor. This will bring up an overlay from which you can choose to create a Data grid.

  5. After steps 2 & 3 or step 4 (depending on how you inserted the Datagrid), you will be prompted to select the columns from the fields in the selected list. It is important to note that the columns appear in the order that you check them. But of course, the columns can be rearranged afterwards. Furthermore, it is always possible to add more columns to the Datagrid, or remove existing columns from the Datagrid, once you have inserted the Datagrid.

  6. For our example, let us have the client name first and then the client id. So, check the fields in that order - client name, followed by client id. Then press 'Ok'.

  7. You now have the Datagrid inserted in the Template Editor. Press 'Save' and see what happens at run-time, while previewing the project.

Consider the search filter that we had added in the Filter property in the . Searching on 'o' showed a filtered list of all the rows that contain the character 'o' in the client name. In our example, the result set of the search filter was less than one page in length. So, see what happens when you use the search filter from page 2.

Illustration
Add filter under the 'Clients' list
Filter expression
Entering 'o' in the search field filters the datagrid results with rows that have 'o' in the client name
Drag field into position
Column inserted
Adding a blank column after the first column
Blank column added
Column ready to be selected
Column selected
Select the column
Hover over the three dots
Select 'Client name' first
...and then 'Client id'
Datagrid inserted
Result in Preview