Data Binding in HTML Widgets and Portals

Wednesday, 20 May 2020 by Paul Hammond

Data Binding in HTML Widgets and Portals provides a fast, easy way for developers to present users with lists based on finPOWER Connect data.

However, there are performance and security considerations to take into account.

Our online demo lets you check out the latest build of finPOWER Connect Cloud.

NOTE: This is regularly updated to show new features and may not match screenshots shown in this article.


The DBCombo HTML Widget control (and the corresponding functionality in the Grid control) can be used to present users with selection lists.

This includes binding the list to a finPOWER Connect 'Standard Range'.

Standard Ranges include most record types from the Admin menu, e.g., Account Types, Branches etc. They also include other record types such as Accounts, Account Applications and Clients.

Once you have created a DBCombo control, it is very simple to use its RefreshFromStandardRange method from JavaScript to populate.

For example, to display a list of Branches:


This can be seen in the New Account wizard:

Created from paste into Topic content

Filters can also be applied, e.g.:

cboBranches.RefreshFromStandardRange("Branches", "EntityId='M'");

For Standard Ranges that may represent thousands of records, e.g., Accounts or Clients, a Search box is automatically provided instead of a list as per the Bank Entry grid (not strictly a DBCombo but it uses the same data binding mechanism):

Created from paste into Topic content

Performance Considerations

HTML Widget controls cache Standard Range data such as Branches, therefore having multiple controls on a single HTML Widget that all provide a Branch list will not result in multiple calls to retrieve the data.

Some Standard Ranges such as External Parties may contain thousands of records so ensure you apply the required filters (via an SQL WHERE clause) or have some other mechanism such as a search form to allow users to locate a record.

Security Considerations

The data-binding mechanism allows for an SQL WHERE clause to be specified to filter lists.

This could potentially be used by attackers to try and expose data they are not authorised to view.

This is why the SQL WHERE clause supplied to filter a DBCombo control must conform to finPOWER Connect's definition of 'simple' of which the main restriction is that it cannot contain a sub-query.

However, you can still use a more complex SQL WHERE clause providing it is encrypted in the Script Code, e.g.:

.DealersSqlWhere = finBL.HtmlWidgetUtilities.EncryptSql("Pk IN (SELECT DealerExPartyPk FROM Account WHERE AccountId LIKE 'X%')")

This can then be used as the SQL WHERE for the Standard Range in JavaScript, e.g.:

cboDealer.RefreshFromStandardRange("Dealers", mRecord.DealerSqlWhere);

Externally Hosted HTML Widgets and Unauthenticated Portals

The ability to use any type of Standard Range in externally hosted HTML Widgets and unauthenticated Portals was removed in finPOWER Connect 3.03.01.

Therefore, the mechanisms described above under 'Manually Retrieving Data' must be used instead.