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.
Picker supports additional events:
data-callback="someFnc"- will fire after date is picked. It will return date object as a parameter.
data-onshow="someFnc"- will fire before picker is shown on the screen. Will return picker object with method to set date for picker and also picker element for advanced usage.
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
data-callback="someFnc"- will fire after item in lookup is selected. It will return selected row as a parameter.
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
By default it will add drop hover text to upload container. To change text, use
data-hide-backdrop="true" to hide hover text.
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 have sorting in data use
When sorting, it will automatically add corresponding