Controls


Appframe Web provides you with a set of controls that you can use to easily create more complex UI elements.

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-timepicker to get a time picker.

Optional attributes

  • data-max-date="2020-12-24" - Sets the maximum date that can be selected
  • data-min-date="2019-01-01" - Sets the minimum date that can be selected
  • data-year-range="[2019,2050]" - Sets the range of years that will be shown in the dropdown. This example will show years from 2019 to 2050
  • data-year-range="5" - Sets the range of years that will be shown in the dropdown. This example will show 5 years back and 5 years forward.

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); }

Related articles

Controls - Lookups

Updated: 06.08.2020 06.51.59

Usage Lookup can be used as advanced select list for your field. It can be used when need to change current row fields or used within list. It can be searchable, have custom buttons, have different sized columns and callback after row selection. To begin using you must create app ...

Read more...

Controls - Date time pickers

Updated: 02.06.2020 11.29.29

Components Appframe Web provides you with a set of components that you can use you easily create more complex UI elements.For Date field, the picked, saved and displayed value always is the same. The day will always be the same no matter the user current time zone. For DateTime field, the picked and ...

Read more...

Controls - File upload

Updated: 26.05.2020 11.08.24

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="upload ...

Read more...

Controls - Report launcher

Updated: 19.05.2020 08.54.36

Usedata-report="someReport" to launch report filter control, where you can create custom filter and download report in pdf/xls format. Markups: data-report-title="Report Title" - sets modal title. data-report-filter="Age > 18" - sets default report filter. data-report-launcher="false" ...

Read more...

Controls - Data grids

Updated: 16.04.2020 10.27.12

There are 2 grid types. data-grid and data-grid2. Main difference is that data-grid supports column width in percent's and data-grid2 only allows column width defined in pixels. Also data-grid2 has more functionality available. Common options Both grids can be editable, there needs to be proper ...

Read more...

Controls - Flex split container

Updated: 27.03.2020 13.00.55

Introducing an alternative to current Split containers control. New control uses Flexbox model, to create resizable layout. ...

Controls - Content Editor

Updated: 27.03.2020 07.14.34

Configuration To begin use the Summernote NWYSIWYG editor, in the div tag add data-content-editor markup. These scripts should be present in the template for this feature to work:@Render("SiteScript", FileName:"af.2 ...

Read more...

Controls - Table frozen columns

Updated: 13.03.2020 12.23.17

Table frozen columns One or more columns can be frozen in table. Use data-freeze-columns tag inside table to freeze all columns to the left while scrolling. Render("SiteScript", FileName:"af.pwa.controls.afFreezeColumns.js") should be presented in template for this feature to work. ...

Read more...

Controls - Stored Procedures

Updated: 13.03.2020 12.23.12

Executing stored procedure You can execute stored procedures by creating a procedure-scope and then bind up parameters and an execute button. Use data-procedure-id='procMyProcedure' to set the procedure-scope. The procMyProcedure must be configured and point to a stored proc on the SQL server. Th ...

Read more...

Controls - Images

Updated: 13.03.2020 12.21.42

Image crop 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. ...

Read more...

Controls - Foxit viewer

Updated: 13.03.2020 12.21.37

Foxit viewer Currently avialable in Pims 365 only Appframe has built in support to view your PDF files using foxit viewer. You can use it as standalone viewer or use markup data-foxit to embed viewer inside another page. You need to modify web.config and add following extension mime ...

Read more...

Controls - Filtering and sorting

Updated: 13.03.2020 12.21.32

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

Read more...

Controls - Edit and upload

Updated: 13.03.2020 12.21.26

Edit and upload To open Edit and upload dialog use data-auto-upload attribute. Required fields FileName, PrimKey, CheckedOutBy_ID and CheckedOut. Available options data-auto-upload="Online|Download|AutoUpload|CheckOut|NewVersion" - attribute is used to choos ...

Read more...

Controls - Data Tree

Updated: 13.03.2020 12.20.43

Data tree represents a hierarchical view of information, where each item can have a number of subitems. data-field-child - define ParentID field from selected data source. data-field-parent - define ID field from selected data source. data-field-display - data field tree element name t ...

Read more...

Controls - Split container

Updated: 13.03.2020 12.20.42

Split containers Use data-split to generate split bar. By default it will add right vertical split bar near container. Add style="width/height:...px; for initial width/height. Split control will store last position of split bar in browser localstorage. In order to show/hide split bar and it's ...

Read more...

Controls - Pagination

Updated: 13.03.2020 12.20.40

Pagination To include pagination/record counter you would mark up a div using:data-items-info. As default you get a simple version without any borders. Note: record counter is stored in browser local storage to remember user defined last page size. ...

Read more...