Appframe Knowledge Base


1 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)