A Query widget that provides a UI wrapper for querying a 4D Database. This component provides a generic widget for querying and acting upon a list of records.

It allows for a user defined query form. It provides buttons for advanced query functionality and the ability to save, and reuse, queries. It also includes a button bar, which can have standard Add/Edit/Delete buttons plus user defined buttons.

The Query Band is simply a UI Component. It does not act when buttons are clicked, all it does is emit events when that happens. The user must subscribe to those events and act accordingly.

The Query Band widget includes a customizable set of buttons that provide the following functionality:

• toggle query form

• do an advanced query

• save/reuse searches/sets

• run query

• clear query form

• export grid contents to Excel

The Query Band Component's selector is <query-band>, and it has the following Input variables:

• enableQBE: enables the Advanced Query button; default is true
• enableSETS: enables the Save Searches/Sets button; default is true
• enableExportGrid: enables the Export To Excel button; default is true
• enableButtonBar: enables the Button Bar on the right hand side; default is false
• enableAddRecord: enables the Add button on the Button Bar; default is false
• enableEditRecord: enables the Edit button on the Button Bar; default is true
• enableDeleteRecord: enables the Delete button on the Button Bar; default is false
• cascadeDeleteRecord: the delete is a cascade delete, when actioned; default is false

When any of the buttons on the Query Band are clicked, they generate events that user can subscribe to:

• queryFromQBE: Advanced Query button clicked
• queryRefresh: Refresh Query button clicked; if a Custom Query Form exists, this event's payload will come from the Custom Query Form's currentQuery property
• queryExportGrid: Export to Excel button clicked
• queryManageSets: Save/Reuse Searches/Sets button clicked
• queryAddRecord: Add button clicked
• queryEditRecord: Edit button clicked
• queryDeleteRecord: Delete button clicked

The QueryBand Component includes two child components, which allow Users to add a custom Query Form and Custom Buttons that will appear in the right place. Those children components are:

• queryband: that corresponds to the form area below the query buttons, and should be replaced by a user defined component form users can fill in to run a query on 4D; such component shall include a currentQuery property that returns a Query String to be sent to 4D
• custombuttonbar: an area to the left of the Add/Edit/Delete buttons, which users can replace by a set of custom buttons

Here is an example on how to replace both Directives with user defined stuff:

<query-band [enableSort]="true" [enableQBE]="true" [enableButtonBar]="true" [enableAddRecord]="true" [enableDeleteRecord]="true">
   <queryband class="form-group">
      <features-queryband #customQueryBand class="form-group"></features-queryband>
   </queryband>
   <custombuttonbar>
      <button class="regularButton" style="width:120px;" (click)="checkFeature()">Analyze</button>
   </custombuttonbar>
</query-band>

and the resulting Query Band would look like this: