static class smartJ$UI
{ } .

• Language: Javascript
• Located at: lib/js/framework/smart-framework.pak.js; jquery.smartframework.ui.js
• Package: Sf.Javascript:UI
• Class Name: smartJ$UI
• Frozen: Yes
• Version: 20230123
• Usage: smartJ$UI.method();
• Depends: jQuery, smartJ$Utils, smartJ$Date, smartJ$Browser, jQuery.gritter/jQuery.toastr, SmartSimpleDialog, SmartSimpleTabs, SmartAutoSuggest, jQuery.ListSelect, jQuery.DatePicker, jQuery.TimePicker, jQuery.DataTable

class Methods

Sample code: JavaScript
 let selectedDate = ''; // or can be yyyy-mm-dd
 let elemID = 'myDatePicker';
 let html = '
 <span id="date-area-' + myDatePicker + '">
   <input type="hidden" id="' + myDatePicker + '" name="date" value="' + selectedDate + '"><!-- holds the ISO formatted date -->
   <input type="text" id="date-entry-' + myDatePicker + '" name="dtfmt__date" maxlength="13" value="' + selectedDate + '" readonly="readonly" class="datetime_Field_DatePicker" autocomplete="off"><!-- holds the custom formatted date -->
 </span>
 ';
 $('body').append(html);
 smartJ$UI.DatePickerInit(elemID, 'dd.mm.yy', '', 1, '-1y -1m -1d', '1y 1m 1d', 1); // initialize the date picker
 $('#date-entry-' + elemID).on('click', (e) => { smartJ$UI.DatePickerDisplay(elemID); })}); // show date picker on click over text input
 $('#date-entry-' + elemID).on('dblclick doubletap', (e) => { $('#' + elemID).val(''); $('#date-entry-' + elemID).val(''); }); // reset on double click the text input

Sample code: JavaScript
 let selectedTime = ''; // or can be hh:ii
 let elemID = 'myTimePicker';
 let html = '
 <span id="time-area-' + elemID + '" title="[###TEXT-SELECT|html###] [HH:ii]">
   <input type="text" name="time" id="' + elemID + '" maxlength="5" value="' + selectedTime + '" readonly="readonly" class="datetime_Field_TimePicker" autocomplete="off">
 </span>
 ';
 $('body').append(html);
 smartJ$UI.TimePickerInit(elemID, 0, 23, 0, 59, 5, 2); // initialize the time picker
 $('#' + elemID).on('click', (e) => { smartJ$UI.TimePickerDisplay(elemID); })}); // show time picker on click over text input
 $('#' + elemID).on('dblclick doubletap', (e) => { $('#' + elemID).val(''); }); // reset on double click the text input

Sample code: JavaScript
 let tabs = '
 <div id="tabs_draw">
   <div id="tabs_nav">
     <li><a href="#tab-in-page">Tab with Content Preset</a></li>
     <li><a href="?content=external-tab-content-load-by-ajax">Tab which loads contents by Ajax</a></li>
   </div>
   <div id="tab-in-page">
     <h1>The content of the first tab ...</h1>
   </div>
   <!-- second tab does not to be set in HTML, will be created on the fly by the tabs component and populated with the HTML contents that comes by Ajax from a GET request on (example): ?content=external-tab-content-load-by-ajax -->
 </div>
 ';
 $('body').append(html);
 smartJ$UI.TabsInit('tabs_draw');

Sample code: JavaScript
 smartJ$UI.TabsActivate(false); // deactivate tabs
 smartJ$UI.TabsActivate(true); // re-activate tabs

Sample code: JavaScript
 // the expected JSON structure that have to be served via the DataURL + ParamSrc
 [
 		{ "id":"id1", "value":"Value1","label":"Label1" },
 		{ "id":"id2", "value":"Value2","label":"Label2" },
 		// ...
 		{ "id":"idN", "value":"ValueN","label":"LabelN" },
 ]
 // the DataURL + ParamSrc controller must take care to return the values filetered by the value sent from the field via ParamSrc via HTTP GET

Sample code: JavaScript
 // <!-- transform the following table into a DataTable with filtering, pagination, column ordering and many other features -->
 //<table id="myTable">
 // <thead>
 // 	<tr>
 // 		<th>Col1</th>
 // 		<th>Col2</th>
 // 	</tr>
 // </thead>
 // <tbody>
 // 	<tr>
 // 		<td>Col1</td>
 // 		<td>Col2</td>
 // 	</tr>
 // </tbody>
 // <tfoot>
 // 	<tr>
 // 		<th>Col1</th>
 // 		<th>Col2</th>
 // 	</tr>
 // </tfoot>
 //</table>
 //--
 smartJ$UI.DataTableInit('myTable', {
 		responsive: false, // if TRUE on responsive mode columns may become fluid on small screens
		filter: true,
		sort: true,
		paginate: true,
 		pagesize: 10,
 		pagesizes: [ 10, 25, 50, 100 ],
 		classField: 'ux-field', // css classes to display input fields (ex: filter)
 		classButton: 'ux-button ux-button-small', // css classes to display the buttons
 		classActiveButton: 'ux-button-primary', // css classes to display the active buttons
		colorder: [
			[ 0, 'asc' ], // [ 1, 'desc' ]
		],
		coldefs: [
			{ // column one
				targets: 0,
				width: '25px',
 				render: (data, type, row) => {
 					if(type === 'type' || type === 'sort' || type === 'filter') { // preserve special objects from column render
 						return data;
 					} else { // customize the appearance of the 1st column
 						return '<span style="color:#CCCCCC;">' + smartJ$Utils.escape_html(data) + '</span>';
 					}
 				}
 				// for more options see: examples at https://github.com/DataTables/DataTables
			},
			{ // column two
				targets: 1,
				width: '275px'
			}
		]
 });
 //--

Sample code: JavaScript
 // filter a DataTable by column no.1 (2nd column, starting from zero) and display only lines where column no.1 have the value: 'warning' or 'error'
 smartJ$UI.DataTableColumnsFilter('myTable', 1, '^(warning|error)$');

class Properties

class Constants