Field Editors

Date/time pickers

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-datepicker. Use 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: data-value-bindings='TargetFieldName=SourceFieldName,PersonID=PersonID, 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

File upload and File Store

You can deal with files using tables connected to Appframe File Store. File links are manually created using data-attr. A upload context (which sets up drag and drop area) is set using data-upload="uploadContextName". A dedicated upload can be set up using data-upload-target="uploadContextName".

or drag and drop from your computer

If you want to show thumbnail for images use the link format /file/view/ARTICLE-ID/DATA-OBJECT-ID/<%=PrimKey%>?width=WIDTH

or drag and drop from your computer

Display, upload and crop images

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. Use data-portrait='true' to make portrait default.

For varbinary

To display images that are stored in a varbinary field in the table you specify them using data-field on a img element.

Filtering and navigation


Add 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.

Record counter/pager

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-next-page data-action-previous-page data-action-first-page and data-action-last-page. To get an excel export from the dataobject in scope use data-excel.

Field Popups

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 data-field-popup='MyField|distinct.

Name Genre

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.

Autofilter Row

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.

Name Genre

Editable Grid

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 put 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'.

Name Genre