Sean edited this page Sep 15, 2017 · 5 revisions

Overview

The svyLookup module provides a UX pattern for quickly finding and returning a record. It is similar to a type-ahead field, but allows for an extended UI, searching and data-binding.

This module provides an out-of-the-box grid implementation, but is also extensible to allow for other UI types

This quick screencast shows the example

Example

Example Look-Up

Example Usage

It takes just a few lines of code to configure and show a robust lookup component. The selected record can be handled in a callback.

Show Lookup

       // create lookup object
	var lookupObj = scopes.svyLookup.createLookup(datasources.db.example_data.products.getDataSource());
	
	// add fields
	
	// related data is supported
	lookupObj.addField('products_to_categories.categoryname').setTitleText('Category');
	lookupObj.addField('productname').setTitleText('Product');
	lookupObj.addField('products_to_suppliers.companyname').setTitleText('Supplier');
	
	// Valuelists and non-searchable fields supported
	lookupObj.addField('discontinued')
		.setTitleText('Available')
		.setSearchable(false)
		.setvalueListName('product_availability');
	
	// formatted, non-searchable field example
	lookupObj.addField('unitprice')
		.setSearchable(false)
		.setTitleText('Price')
		.setFormat('#,###.00')
	
	// show pop-up
	var component = elements.productID;
	var initialValue = application.getValueListDisplayValue(elements.productID.getValueListName(),selectedProductID);
	lookupObj.showPopUp(onSelect,component,null,null,initialValue);

Handle selection in callback

	function onSelect(record){
		if(record){
			selectedProductID = record.productid
		}
	}
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Press h to open a hovercard with more details.