Components

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.

Date picker methods

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.
function dateCallbackFnc(pDate){ console.log(pDate); } function dateOnShowFnc(pPicker){ pPicker.setDate(new Date("2012-12-12")); console.log(pPicker); }

Lookups

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
  • data-callback="someFnc" - will fire after item in lookup is selected. It will return selected row as a parameter.

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". By default it will add drop hover text to upload container. To change text, use data-upload-hovertext="Custom text". Use data-hide-backdrop="true" to hide hover text.

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, navigation and sorting

Search

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.

FILTER ROW
Name Genre

Sorting

To have sorting in data usedata-sort-by="FieldName" When sorting, it will automatically add corresponding asc or desc classes.

Sort by name