Appframe Knowledge Base


21 hits
3

Web-Templating: Lookup, lookup-bindings

<!-- To connect a lookup to an input add attribute   
	data-lookup-id="idOfYourLookup" and 
	data-lookup-bindings="field1=field2, field3=field4" 
	field1 and field3 are fields in base (host/target) data-object
	field2 and field4 are fields in lookup data-object  -->
	
<input type="tel" 
		class="form-control" 
		data-field="PostCode" 
		data-lookup-id="lookupPostCode"
		data-lookup-bindings="Postcode=Postcode, Location=Location">
		
<!--  To define a lookup add attributes as shown below. -->
<div id="lookupPostCode"
		data-templating="lookup"
		data-object-id="dsPostCodes"  
	 	data-lookup-width="400"
		data-display-fields="Postcode, Location">  <!-- creates lookup markup automatically -->
</div>
<!-- If you don't like the instant search (automatic search after 3 charachters) add attribute data-disable-instant -->

<!-- If you would like to use your own custom markup leave out the data-display-fields and provide a template instead-->
<div data-templating="lookup"
		id="lookupPostCode"
	 	class="list-group"
		data-object-id="dsPostCodes" 
	 	data-lookup-width="400"
		data-disable-instant
		data-limit-to-list="true"> <!-- Remove this attribute to get automatic search after 3 charchters -->
	<div data-item-template="default">
		<div class="list-group-item">
			<span data-field="Postcode"></span>,
			<span data-field="Location"></span> 
			<span data-field="Country"></span>
		</div>
	</div>
</div>

<!-- If you would like to have the lookup unbound you should leave out the data-lookup-bindings and data-field attributes -->
<input type="tel" 
		class="form-control" 
		data-lookup-id="lookupPostCode">
		
<div id="lookupPostCode"
		data-templating="lookup"
		data-object-id="dsPostCodes"  
	 	data-lookup-width="400"
		data-display-fields="Postcode, Location">  <!-- creates lookup markup automatically -->
</div>
<!--In order to get the selected value you need to use event in javascript-->
<script>
af.article.getUnboundCustomDropdown("lookupPostCode").attachEvent("onRecordSelected",function(pRow){
});
</script>
<!-- Custom items -->
<div id="lookupHosts"
        data-templating="lookup"
        data-display-fields="HostName, Title"
        data-lookup-items="myTestItems"  
        data-object-id="dsMyTestItems"><!--dsMyTestItems should not be defined as dataobject, must be named unique-->
</div>
<script>
/*function that returns static items as json*/
function myTestItems(){
    return [{HostName:"HostName 1", Title:"Title 1"},{HostName:"HostName 2", Title:"Title 2"}]
}
</script>

dataobject web web-templating · Perma link post comment Posted by: Sigmund Lunde (18-des-2014)

D. Young Hoang :
I am going through the Certification Program using Appframe.Core v4.30.0.19024 and data-lookup-bindings is no longer working. After looking into the js source code, looks like it has been updated to data-value-bindings. I used data-value-bindings and it worked. In addition to that the JS console will throw a warning message if the data type of the first field/column from the lookup's data object does not match with the input data type. To fix that, I need to set the data-display to the selected field. i.e.: <input data-field="CustomerID" type="number" class="form-control" id="Orders_CustomerID" data-lookup="dsCustomers" data-display="ContactID" data-value-bindings="CustomerID=ContactID"> (05-okt-2017)
3

Web-Templating: data-field, data-attr, src, href, crop , null-image, ratio, file upload

<!-- Simple bound form-->
<div data-object-id="dsPersons">
    <h4 data-field="Name"></h4>
	<input type="text" data-field="Address"></input>	
	<button data-action="save" class="btn btn-default">Save</button>
	<button data-action="cancel" class="btn btn-default">Save</button>
</div>

<!-- Binding image to img
	 - data-attr="src:url"
	 - data-null-image: will use this image when data is null
-->
<img class="img-responsive thumbnail pull-left" 
	 data-attr="src:/file/db/info/dsKommentarer/Bilde/<%=PrimKey%>/<%=Bilde%>?height=35" 
	 data-null-image="/static/graphics/camera-icon.svg">

<!-- Binding url anchor
	 - data-attr="href:url"
-->
<img class="img-responsive thumbnail pull-left" 
	 data-attr="href:/file/db/info/dsKommentarer/Bilde/<%=PrimKey%>/<%=Bilde%>?height=35" >

<!-- Binding crop with save
	data-crop: enables crop for img. If empty, filestore will be used. If not the value should be varbinary field from table.
	data-ratio: sets the crop ratio (width/height)
	-->
<img data-object-id="dsPerson" 
		data-crop="Bilde" 
		data-ratio="1" 
		data-attr="src:/file/db/brukerinfo/dsPerson/Bilde/<%=PrimKey%>/<%=Bilde%>" 
		data-null-image="/static/graphics/camera-icon.svg" >

<!-- Binding fileuploader: Provides drag & drop and fileupload
     - data-object-id
	 - data-upload
-->
<div data-upload class="file-upload-control col-xs-12" data-object-id="dsFiler" id="arkivUploader">
	<!-- put your markup here -->
</div>

<!--Upload link to trigger filechooser-->
<a href="#" class="pull-right text-muted" data-upload-target="arkivUploader">velg fil(er) for opplast...</a>




dataobject web web-templating · Perma link post comment Posted by: Sigmund Lunde (09-nov-2014)

3

Web-Templating: data-templating="item-list" or data-templating="current-item"

<!--   Databinding attributes:

	data-object-id="dsRecords" (defining the scope)

   	data-templating="item-list" (will look for data-item-template and then render 
	 one copy of the relevant template per record)
	data-templating="current-item" (will look for data-item-template and render one copy 
	 of the relevant template for current record only)

   	data-item-template="default" (root element for the default item template)
	data-item-template="current-item"
	data-item-template="current-item-edit"
	data-item-template="new-item-edit"
	data-item-template="no-data" (rendered if there are no data returned from database)
	data-add-class-if="test:className" //test must be a javacript condition: data.fieldName === 'Test':MyClass
	data-remove-class-if="test:className" //test must be a javacript condition: data.fieldName === 'Test':MyClass
	
	
   	data-field="FieldName"	(used in elements to bind data)
   	data-datepicker="date" / "datetime" / "time"
	data-attr="src:/file/db/Persons/dsPersons/<%=PrimKey%>/<%=ImageCRC%>" 
	data-attr="href:/persons?<%=ID%>"
	
   	data-action="save" (used in button elements: click button will save record to database)
   	data-action="cancel" 
   	data-action="delete" 
   	data-action="edit" 
   	data-action="new" (used in button elements: set dataobject.currentRow to -1 and fire beginEdit)
   	data-action="clear"  (used in dropdowns to clear fieldvalue)
   	data-action="done"  (saves if dirty, cancel if not dirty)
	data-action="next" 
	data-action="previous" 

   	data-show-newitem (in item-list: allways shows UI for new record, if not present or "false"
	you will need to use an action to show new record UI)
	
	data-edit-focus (used in current-item-edit and new-item-edit for choosing a specific element that should have focuse when entering edit mode)
	
	functions:
	data-template-function (used if custom template is needed. Return name of custom template and this will be used insated of current active template. Must be located on rootelement)
	data-function (can be used on any element and will be executed for each row-rendering)
--->

<!-- Simple bound list of items (all records using same template)-->
<div data-templating="item-list" data-object-id="dsPersons">
  <div data-item-template="default">
    <h4 data-field="Name"></h4>
	<span data-field="Address"></span>
	<br>
	<span data-field="ZipCode"></span>
	<span data-field="City"></span>
  </div>
</div>

<!-- Simple bound list of items, highlighting current-item by introducing a second template -->
<div data-templating="item-list" data-object-id="dsPersons">
  <div data-item-template="default">
    <h4 data-field="Name"></h4>
	<span data-field="Address"></span>
	<br>
	<span data-field="ZipCode"></span>
	<span data-field="City"></span>
  </div>
  <div data-item-template="current-item" class="active">
    <h4 data-field="Name"></h4>
	<span data-field="Address"></span>
	<br>
	<span data-field="ZipCode"></span>
	<span data-field="City"></span>
  </div>
</div>

<!-- Simple bound list of items, editing current-item -->
<div data-templating="item-list" data-object-id="dsPersons">
  <div data-item-template="default">
    <h4 data-field="Name"></h4>
	<span data-field="Address"></span>
	<br>
	<span data-field="ZipCode"></span>
	<span data-field="City"></span>
  </div>
  <div data-item-template="current-item" class="active">
    <h4 data-field="Name"></h4>
	<input type="text" data-field="Address"></input>
	<br>
	<input type="text" data-field="ZipCode"></input>
	<input type="text" data-field="City"></input>
  </div>
</div>

If you need a list of editable items: put inputs in the "default" template.

If you want a popup form for editing, make a "current-item-edit" template with a bootstrap
modal element (you need to trigger the edit by calling the beginEdit on the dataobject.

To trigger an edit, use a button with data-bind="edit"

If you would like to allways show a "new blank record" (enabling the user to input a new item)
just set the "data-show-newitem" attribute (in the data-list root element).

dataobject web web-templating · Perma link post comment Posted by: Sigmund Lunde (07-nov-2014)

Robert Vinkovic :
Solution, not the only one but the only one I have managed to make work: parent div must have data-list="manual-edit" with 2 child divs one with data-item-template="read-only" and one with "edit" (22-jan-2015)
Peter Butt :
(23-feb-2015)
Martin Vaaden :
Tried using data-remove-class-if some time ago, but seems like it's not in use any more (?) Seems like data-add-class-if will add class if check == true and remove if check == false (12-jun-2015)
1

Guidelines for creating afDataObject in code

' It is recommended that you only create afDataObject instances
' through the Windows Forms designer. If you for some reason have to
' do it programatically, it is important that it is disposed correctly.
' Otherwise it will remain identifitely in memory and cause various
' performance issues in the client. Two ways to do this:

' 1. Add the data object to the form's components collection. This will
'    dispose it automatically when the form is closed (recommended):

Public Sub New()
    InitializeComponent();
    gDataObj = New afDataObject();
	components.Add(gDataObj);
End Sub

' 2. Handle the .Disposed event of the enclosing form/control and dispose
'    the data object manually (not recommended):

Private Sub MyForm_OnDisposed(pSender As Object, pArgs As EventArgs) Handles Me.Disposed
    If gDataObj IsNot Nothing Then
        gDataObj.Dispose()
    End If
End Sub

' If the instance is only used within the scope of a single function,
' always enclose it in a Using block like the following:

Using vDataObj As New afDataObject()
    ' Insert code here...
End Using

dataobject win · Perma link post comment Posted by: Jarl Erik Schmidt (08-jun-2012)

1

Select, web-templating, add options from datasource

<!-- 
	To create options in a select element use data-options="dataSource" and specify data-option-text="field" (and data-option-value if different from data-option-text)
-->
<select class="form-control" 
	data-field="Categories"
	data-options="dsCategories"
	data-option-text="Category">

	<!-- Generated options (from data-options datasource) will not replace any options allready in your markup -->
	<option class="text-muted">(choose a category)</option>	
</select>

dataobject web web-templating · Perma link post comment Posted by: Peter Øren (23-des-2014)

0

Appframe Web Templating - Overview

<!-- Appframe Web Templating

Scope:
Add data-object-id="dsMyData" to an element to create a databound scope. This element
and all sub-elements will have the same scope (until you specify another data-object-id).

Lists:
Use data-templating="item-list" to render one copy of your template per record.

Current-Item:
Use data-templating="current-item" to render one copy of your template for current record only

Template IDs:
Mark the root of your template with data-item-template="default" or any of the following template IDs
	"current-item"
	"current-item-edit"
	"new-item-edit"
	"no-data"
The template engine will look for templates from the bottom of the list. For a new record it 
will first look for new-item-edit. If this is not found it will look for current-item-edit, then 
it will look for current-item, and then finally it will pick default if no other templates are defined.

Binding Updatable Fields:
Use data-field="MyField" to databind an element to a field in your dataobject.
You will get 2-way binding, changes to the data-object will show in the element,
and input/changes in the element will be posted to the dataobject

Binding Attributes:
Use data-attr="src:/images/<%=PictureName%>" This is a one way binding (nothing is posted back to the dataobject)
Use data-attr="href:/persons?<%=PersonID%>"
Use data-current-index to bind current index to element
Use data-record-count to bind datalength to element

Actions:
Use data-action="save" to force the data-object to save changes to the database
Use data-action="new" to add a new record
Use data-action="cancel" to abort editing (and make any edited values go back to their saved state)
Use data-action="edit" to set the dataobject into edit-mode (and change template(s) if relevant)
Use data-action"delete" to delete current record
Use data-action="done" to save if there are changes or cancel editmode if not dirty
Use data-action="next" to move to next item in dataobjet
Use data-action="previous" to move to previous item in dataobjet

Select:
Use data-options="dsMyOptionsDatasource" in a <SELECT> element to create <OPTION> elements.
Use data-text="MyFieldname" to set option text
Use data-value="AnotherFiledname" to set option values (optional)

Lookup:
Use data-templating="lookup" and add an id="myID" to define a lookup
Use data-display-fields="MyField, AnotherField" to set what fields should be displayed in the lookup
The lookup can be used several places in the page.
To use the lookup for an input set data-lookup-id="myID"
and set data-lookup-bindings="field1=field2, field3=field4"

Datefields/Date-pickers:
Use type="text" and data-datepicker="date" to enable datepicker for a date field.
Use type="text" and data-datepicker="datetime" to enable date and time picker for a datetime field.

-->

dataobject web-templating · Perma link post comment Posted by: Sigmund Lunde (27-des-2014)

0

Setting default values when moving to a new record in data object

/* To set default values when focusing "new row",
   attach an event to the data object's onCurrentIndexChanged event
   and set the default values using this.currentRow(pFieldName, pValue); */

dsDataObject.attachEvent("onCurrentIndexChanged", function(pIndex) {
    if(pIndex === -1) { // index is -1 when "new row" is active
        // "this" is a reference to the data object inside this scope
        this.currentRow("FieldName", "My Default Value");
    }
});

components dataobject web · Perma link post comment Posted by: Jan Henrik Høiland Meling (14-mai-2012)

0

How to attach event on current-row changed in data object

dsDataObject.attachEvent("onCurrentIndexChanged", function (pIndex) {
	var row = this.currentRow();
});

components dataobject web · Perma link post comment Posted by: Torgeir Fredriksen (09-mai-2012)

0

How to set sortorder on dataobject

dsKnowledge.recordSource.setSortOrder([{Created:'desc'}]);
dsKnowledge.setParameter("sortOrder", [{Created:'desc'}]);

components dataobject web · Perma link post comment Posted by: Peter Øren (17-jan-2012)

0

How to update single cell in dataobject

atbv_Gruppe1_Records.CurrentRow("CategoryID") = e.Value("CategoryID").ToString()

dataobject win · Perma link post comment Posted by: Torbjørn Mevik (01-okt-2013)

0

How to update and save current data object row in JavaScript

// First update the values you want to save
dsSomething.currentRow("SomeField", "NewValue");
dsSomething.currentRow("OtherField", "OtherValue");

// The use one of the following depending on the situation
dsSomething.endEdit(); // Fire and forget
dsSomething.endEdit(function() { /* do something after */ }); // Asynchronously
dsSomething.endEdit(function() { /* do something after */ }, true); // Synchronously

components dataobject web · Perma link post comment Posted by: Torbjørn Mevik (15-jul-2013)

D. Young Hoang :
dsSomething.endEdit(function(eErr, eData) { if (eErr === null) { alert('Successfully saved.'); } else { alert('Something went wrong. Please try again(' + eErr + ')'); } }, true); (06-jul-2018)
0

How to set filterString, whereClause, filterObject and whereObject on a data object in JavaScript

// Setting of whereClause and filterString as strings is no longer recommended and may be removed in the near future.
// If an AppSetting called DisableClientSideFilterStrings is set to true, filterString and whereClause will be ignored.

// To set filterString
ds.setParameter("filterString", vFilter);
ds.recordSource.setFilterString(vFilter);

// To set whereClause
ds.setParameter("whereClause", vFilter);
ds.recordSource.setWhereClause(vFilter);

// NOTE: There is a separate kb article on how to define a filter object

// To set filterObject
ds.setParameter("filterObject", vFilterObject);
ds.recordSource.setFilterObject(vFilterObject);

// To set whereObject
ds.setParameter("whereObject", vFilterObject);
ds.recordSource.setWhereObject(vFilterObject);

// Setting filter will not automatically refresh the datasource
// So you will have to call refreshDataSource after setting the filter
ds.refreshDataSource();

components dataobject web · Perma link post comment Posted by: Øystein Kaldestad (12-apr-2013)

0

How to get number of rows

//will return the number of rows available / loaded
//it will not return the total number of rows the table/view contains
//if you want the total number of rows, you need to set maxRecords to -1 and reload first
ds.getDataLength();

// ds.getData() is a heavy operation, so if you are going to iterate over a limited number of rows,
// use ds.getDataLength() and ds.getData(index) for much better performance.

components dataobject web · Perma link post comment Posted by: Øystein Kaldestad (12-apr-2013)

0

How to set field value on current row

//Set value of a field in the current row
ds.currentRow(vFieldName, vNewValue);

components dataobject web · Perma link post comment Posted by: Øystein Kaldestad (12-apr-2013)

0

How to get current row's data

//Get the whole current row as an object
ds.currentRow();

//Get value of a specific field in the current row
ds.currentRow("SomeField");

components dataobject web · Perma link post comment Posted by: Øystein Kaldestad (12-apr-2013)

0

How to get current row index

//Get current Index
ds.getCurrentIndex();

components dataobject web · Perma link post comment Posted by: Øystein Kaldestad (12-apr-2013)

0

How to set current row index

//Set Current Index
ds.setCurrentIndex(vIndex);

components dataobject web · Perma link post comment Posted by: Øystein Kaldestad (12-apr-2013)

0

Listen for changes on a field

// The listener is attached to the data object, and will not be
// triggered when the current index is changed.

dsStuff.attachEvent("onFieldChanged", function (pField) {
	if (pField.name === "FieldName") {
		// Do stuff
	}
});

components dataobject web · Perma link post comment Posted by: Jarl Erik Schmidt (20-feb-2013)

0

How to use the filter object in javascript

// some variables to be used as part of filter criteria
var vCurrentMonday = new XDate(+$("#weeks").val()),
	vOrderItem = $("#orders").val();

// defining the filter object
dsTimesheet.setParameter("filterObject", {
	type: "group", mode: "and", items: [
		{ type: "expression", column: "WeekStarting", operator: "equals", valueType: "datetime", value: vCurrentMonday },
		{ type: "expression", column: "OrderItemTemplate", operator: "equals", valueType: "string", value: vOrderItem }
	]
});

// refresh the data source to get data using the filter
dsTimesheet.refreshDataSource();

// Alternatively you can build the filter string yourself,
// but then you need to make sure you escape and format the values properly
dsTimesheet.recordSource.setFilterString("WeekStarting = '" + af.common.formatByMask(vCurrentMonday, "sql_date_time") + "' AND OrderItemTemplate = '" + vOrderItem.replace(/'/g, "''") + "'");

components dataobject web · Perma link post comment Posted by: Torgeir Fredriksen (29-nov-2012)

0

How to trigger loading of data object

dsMyDataObject.refreshDataSource();

components dataobject web · Perma link post comment Posted by: Peter Øren (05-okt-2012)

0

Resetting values to their saved state in data object

/* To set reset values to their saved state you only need to call 
   cancelEdit if you want to reset all fields, or
   cancelField if you want to reset just one field */

dsMyDataObject.cancelEdit();

dsMyDataObject.cancelField("MyFieldName");

components dataobject web · Perma link post comment Posted by: Jan Henrik Høiland Meling (30-jul-2012)