View RSS Feed

LianjaDev

HOWTO Working with Lianja grids

Rate this Entry
Lianja grids are highly customizable and flexible. In this article I will explain the magical features and functionality of Lianja grids which is particularly relevant to No-Code and Low-Code developers.

This article was written using Lianja 7.0 so you may want to download that and go through this article to familiarize yourself with the Lianja grids.

All of this functionality is available in Desktop, Web and Mobile Apps.

So let's get started.

Grid overview

In its simplest form a grid displays data in rows and columns with the ability to browse millions of records with built in pagination.

You can configure grids and their columns declaratively in the App Inspector by specifying attributes.

Split Grid Editing

Grids can be configured with split grid editing capabilities. This functionality splits the grid in two with the right hand side of the display being tabbed providing the ability to edit a row as a form, display and edit rich text and html content and display images. With this ability, grids are almost an application in their own right.

Clicking or navigating to a row refreshes the split grid data allowing editing in form view.

Click image for larger version. 

Name:	Screen Shot 2022-01-21 at 12.27.34 PM.jpg 
Views:	465 
Size:	98.2 KB 
ID:	2742

Long text/html documents can be edited in place.

Click image for larger version. 

Name:	Screen Shot 2022-01-21 at 12.29.00 PM.jpg 
Views:	413 
Size:	117.6 KB 
ID:	2743

Images can be included in the split grid editing. Double click an image to replace it with another.

Click image for larger version. 

Name:	Screen Shot 2022-01-21 at 12.34.34 PM.jpg 
Views:	401 
Size:	110.5 KB 
ID:	2744

A grid consists of rows and columns. The columns can be data bound to the database and table specified in the grid attributes or can have calculated values. You can restrict what columns can be edited and seen by users based on roles and permissions.

The color of the grid rows can be dynamic based on the data that the row contains. For example you can highlight negative values like this.

Click image for larger version. 

Name:	Screen Shot 2022-01-21 at 12.24.42 PM.jpg 
Views:	393 
Size:	106.8 KB 
ID:	2741

Cells in a grid may contain custom components by specifying Custom Renderers and optional Custom Editors.

Click image for larger version. 

Name:	Screen Shot 2022-01-21 at 12.12.43 PM.jpg 
Views:	402 
Size:	102.4 KB 
ID:	2737

Data Summaries

Columns may have summaries displayed consisting of:

Min
Max
Average
Total

Select the grid section then enable Total. Select each column and enable summary.

Click image for larger version. 

Name:	Screen Shot 2022-01-21 at 12.05.34 PM.jpg 
Views:	378 
Size:	29.7 KB 
ID:	2738

Searching data

After enabling Search bar visible in the grid section attributes you can filter the data displayed in the rows selected by typing into the search bar then pressing Return/Enter.

Click image for larger version. 

Name:	Screen Shot 2022-01-21 at 12.19.41 PM.jpg 
Views:	385 
Size:	27.6 KB 
ID:	2740

Querying data

Complex queries can be applied as filters to the data displayed using the built-in query builder.

Click image for larger version. 

Name:	Screen Shot 2022-01-21 at 12.15.10 PM.jpg 
Views:	384 
Size:	74.9 KB 
ID:	2739

Sorting data

After enabling Sortable in the grid section attributes, clicking on a column header toggles between ascending and descending data order.

Dynamic Badges

Click image for larger version. 

Name:	Screen Shot 2022-01-21 at 1.31.17 PM.jpg 
Views:	387 
Size:	138.3 KB 
ID:	2746

Dynamic Spark Line Charts

Click image for larger version. 

Name:	Screen Shot 2022-01-21 at 1.37.10 PM.jpg 
Views:	379 
Size:	140.5 KB 
ID:	2747

Dynamic Spark Bar Charts

Click image for larger version. 

Name:	Screen Shot 2022-01-21 at 1.40.54 PM.jpg 
Views:	372 
Size:	140.8 KB 
ID:	2748

Dynamic Ratings

Click image for larger version. 

Name:	Screen Shot 2022-01-21 at 2.10.00 PM.jpg 
Views:	377 
Size:	138.7 KB 
ID:	2750

StringList editor

Click image for larger version. 

Name:	Screen Shot 2022-01-21 at 2.06.03 PM.jpg 
Views:	376 
Size:	80.8 KB 
ID:	2749

Data Mapping

In the context of relational databases, a foreign key is a field in one table that uniquely identifies a row of another table. In simpler words, the foreign key is defined in a second table, but it refers to the primary key or a unique key in the first table. For example, a table called Employee has a primary key called employee_id. Another table called EmployeeDetails has a foreign key which references employee_id in order to uniquely identify the relationship between both tables.

The table containing the foreign key is called the child table, and the table containing the candidate key is called the referenced or parent table.

Data mapping is the process of performing a two way mapping between the fields in the parent and child tables. This is accomplished by setting the "Choices", "Get Data Mapping" and "Set Data Mapping" attributes for fields or grid columns.

Data mapping is defined in the business rules for a column of a table. It works across Desktop, Web and Mobile Apps.

This functionality reduces coding in Apps dramatically.

As mentioned above you define data mapping in the Active Data Dictionary.

Click image for larger version. 

Name:	Screen Shot 2022-01-26 at 11.24.54 AM.jpg 
Views:	374 
Size:	98.5 KB 
ID:	2756

When the table is open data mapping is automatically handled in the UI in Desktop and Web Apps.

Click image for larger version. 

Name:	Screen Shot 2022-01-26 at 11.24.22 AM.jpg 
Views:	369 
Size:	126.6 KB 
ID:	2757

Business Rules

A business rule is a statement that imposes some form of constraint on a specific aspect of the database, such as the elements within a field specification for a particular field or the characteristics of a given relationship.

Business rules are defined using the Table Designer or in code using the ALTER TABLE command.

There are a wide range of business rules which can be associated with tables and their columns. These business rules are active whenever a table is opened or bound to a UI element in Desktop, Web, Mobile or ODBC connections that use Lianja SQL Server.

These business rules are contained within the Active Data Dictionary for a table. Changes to these business rules do not require any changes to applications. When the applications are opened and the UI loaded with bound data, by default the business rules are inherited from the Active Data Dictionary.

You can restrict what data is entered by a user using validation, input masks, choicelists and much more.

Click image for larger version. 

Name:	Screen Shot 2022-01-26 at 10.20.31 AM.jpg 
Views:	377 
Size:	61.9 KB 
ID:	2753

MetaData

When you associate metadata with tables or columns, you typically define UI attribute names and values. Wherever the table or column is used in any App, when the table is opened the metadata is read and the attributes are then applied to the UI element.

Changes to the metadata are automatically applied across all Apps. No code changes are required.

This provides a powerful means of data binding with associated business logic all without coding.You define metadata for databases, tables, and columns using the MetaData Editor which is integrated into the Table Designer.

Click image for larger version. 

Name:	Screen Shot 2022-01-26 at 10.39.43 AM.jpg 
Views:	369 
Size:	72.3 KB 
ID:	2754

Desktop BROWSE

The BROWSE command is a favorite with VFP developers for building desktop applications.

LianjaScript has an enhanced version of BROWSE with split grid editing and many of the features described in this article. With business rules defined in the data dictionary for a table and its columns BROWSE can be used in desktop applicatons without compromising data integrity.

Example usage:

Code:
browse table southwind!employees splitbar title "Employees" properties "showsplitedit=true;splitmemolist=notes;splitimagelist=photo"
Click image for larger version. 

Name:	Screen Shot 2022-01-25 at 6.05.43 PM.jpg 
Views:	373 
Size:	54.2 KB 
ID:	2752

Embedding desktop BROWSE in a custom section

In desktop Apps you can embed a BROWSE command in a custom section.

Add a custom section to a page then in the custom BROWSE command attribute type:

Code:
browse table southwind!employees title "Employees"
Click image for larger version. 

Name:	Screen Shot 2022-01-26 at 11.17.28 AM.jpg 
Views:	359 
Size:	75.9 KB 
ID:	2755

Submit "HOWTO Working with Lianja grids" to Google Submit "HOWTO Working with Lianja grids" to Facebook Submit "HOWTO Working with Lianja grids" to Twitter

Updated 2022-01-26 at 03:56 by barrymavin

Tags: None Add / Edit Tags
Categories
NoCode , LowCode , HOWTO

Comments

Journey into the Cloud
Join us