To add a date or time picker dropdown to your input element you must add an attribute. To get a date-picker
for example you should add:
data-time-picker to get a time-picker.
If you need a filterable replacement for a select element you could use an appframe lookup:
data-lookup='dsUsers' inside an input element will create a lookup using the first
datasource field as the lookup field. If you include
data-display='Field1' you set the
source field (from lookup datasource) for what will be displayed display after the lookup).
If you include more than one field in your display (or use a template
for the lookup definition) you can set up bindings for more than one field using:
Name=FullName' These assignments are executed when the user makes a selection in the lookup.
data-columns="Artist:160px,Website:160px,Genre:200px" - Format column widths
data-lookup-width='400px' - set width of lookup
data-lookup-search='false' - hide the search box
data-limit-to-list='true' - stop the user from writing in the input.
data-field='LinkedField' - data-field can be a value looked up in the source, i.e. show full artist name from artist table when storing artist ID in the table
You can deal with files using tables connected to Appframe File Store. File links are manually
data-attr. A upload context (which sets up drag and drop area) is set
data-upload="uploadContextName". A dedicated upload can be set up using
If you want to show thumbnail for images use the link format
To enable image-cropping (for example if you want to limit the uploaded images to a common format)
you can use
data-crop on the image element. Use
data-ratio='0.75' to set a default ratio.
data-portrait='true' to make portrait default.
To display images that are stored in a varbinary field in the table
you specify them using
data-field on a
data-search to an input element to get automatich search. As long as the input element is located
inside a binding-scope you will (when typing in the searchbox) get a filter-string saying that 'SearchColumn like '%searchfor%', and
a dsDataSource.refreshDataSource(); will be executed.
To include a record counter/pager you would mark up a div using:
data-items-info. As default you get
a simple version without any borders. Use
data-items-info='boxed' to get a more complete version.
To navigate between pages of data use
data-action-first-page and data-action-last-page. To get an excel export from the dataobject in scope use
If you require your users to filter or sort data, there is a handy little component available.
You activate this component by adding the
data-field-popup='MyField' to an element (typically
column headers in tables). If you would like a distinct list of values listed inside the popup, just include
distinct behind the fieldname
To show two fields together
just add a comma and one more fieldname
data-field-popup='code, description'. Please note that the
filtering will be based on the first field only.
If you would like to have an autofilter row in a table, this can be achieved by marking up inputs with
data-filter-field='MyField'. If you type into this field now, you wil automatically set a filterstring
and issue a refreshDatSource action. Also when a filter i set from another component (for example a field-popup),
this input will be updated to reflect the active filterstring.
To get keyboard navigation in a table, just add the
data-grid attribute to the table element (you
also must have inputs inside your tds so that the cursor could actually focus). To include a selection column
as the first column in the table, add the
data-selection-cell attribute to the first td in the tbody. Likevise
data-action-cell in the last td to get a button for delete record. The corresponding tds in thead
should have a style='width:32px'.