Difference between revisions of "Section Search Panels"

Latest revision as of 06:38, 13 April 2023

Sections can have a Search Panel displayed at the top of the section, under the Section Menu and Section Subtitle (if these are visible). This can be an Auto create Search Panel containing Fields flagged as Search Panel fields and comparison operators. Alternatively, it can be a custom-coded Search Panel.

Double-click on the Section header or click the cog icon to access the Section Attributes. Scroll down to the Search Panel sub-section.

Visible

Section Search Panel: default Visible is False

By default, the Section Search Panel is not visible.

Section Search Panel: set Visible to True

To make the Section Search Panel visible, check the Visible attribute to True.

The Visible attribute can be queried or changed programmatically using Lianja.getElementByID("page.section").searchpanelvisible.

Notes on Client Support

Height

Section Search Panel Height

The Height attribute is used to specify the Section Search Panel height.

Note: see Auto create below for the contents of the Search Panel shown here.

Notes on Client Support

Background color

Section Search Panel Background Color

The Background color is used to specify the Search Panel background color.

Click the [...] button to access the 'Select Color' dialog.

Note: see Auto create below for the contents of the Search Panel shown here.

Notes on Client Support

Foreground color

Section Search Panel Foreground Color

The Foreground color is used to specify the Search Panel foreground color.

Click the [...] button to access the 'Select Color' dialog.

Note: see Auto create below for the contents of the Search Panel shown here.

Notes on Client Support

Auto create

Section Search Panel Auto create: Form Section Field

Before enabling Auto create to automatically generate a Search Panel, the fields to be included in the Search Panel need to have their Search panel field attribute set to True.

Section Search Panel Auto create: Grid Section Column

The same applies to columns in a Grid Section. Double-click the header of a column in the Grid Section to access its attributes, then check the Search panel field attribute to set it to True.

Section Search Panel Auto create

Auto create can now be enabled in the attributes for the Section.

Notes on Client Support

Custom search panel

Section Search Panel: Custom search panel

As an alternative to the Auto create Search Panel, a Custom search panel based on a script function can be used. This is written in the Section's Scripting Language. It needs to create a Lianja UI Framework container object with the required controls and then add it to the Section using the section.AddSearchPanel() method.

Click the [...] button to create and edit the script function.

Lianja/VFP function example

////////////////////////////////////////////////////////////////
// handlers for the Search Panel
proc sp_search_handler()
	Lianja.showDocument("section:section1?action=search&text="+sp_textbox.text)
endproc
 
proc sp_reset_handler()
	Lianja.showDocument("section:section1?action=search&text=")
	sp_textbox.text = ""
endproc
 
 
////////////////////////////////////////////////////////////////
// Event delegate for 'searchpanel' event
proc Customers_section1_searchpanel()
	sp_container = createObject("container")
	sp_container.addObject("sp_label", "label")
	sp_label.move(5, 3, 80, 20)
	sp_label.text = "Company Name"
	sp_container.addObject("osp_textbox", "textbox")
	public sp_textbox
	sp_textbox = osp_textbox
	osp_textbox.move(85, 3, 100, 20)
	sp_container.addObject("sp_search", "commandbutton")
	sp_search.move(190, 3, 60, 20)
	sp_search.text = "Search"
	sp_search.click = sp_search_handler
	sp_container.addObject("sp_clear", "commandbutton")
	sp_clear.move(255, 3, 60, 20)
	sp_clear.text = "Reset"
	sp_clear.click = sp_reset_handler 
	this.addSearchPanel(sp_container)
endproc

JavaScript function example

////////////////////////////////////////////////////////////////
// Event delegate for 'searchpanel' event
function page1_section1_searchpanel()
{
	sp_container = createObject("container");
	sp_container.addObject("sp_label", "label");
	sp_label.move(5, 3, 100, 20);
	sp_label.text = "Company Name";
	sp_container.addObject("osp_textbox", "textbox");
	sp_textbox = osp_textbox;
	osp_textbox.move(105, 3, 280, 20);
	sp_container.addObject("sp_search", "commandbutton");
	sp_search.move(400, 3, 60, 20);
	sp_search.text = "Search";
	sp_search.click = sp_search_handler;
	sp_container.addObject("sp_clear", "commandbutton");
	sp_clear.move(465, 3, 60, 20);
	sp_clear.text = "Reset";
	sp_clear.click = sp_reset_handler ;
	Lianja.get("page1.section1").addSearchPanel(sp_container);
};
 
////////////////////////////////////////////////////////////////
// handlers for the Search Panel
function sp_search_handler()
{
	Lianja.showDocument("section:section1?action=search&text="+sp_textbox.text);
};
 
function sp_reset_handler()
{
	Lianja.showDocument("section:section1?action=search&text=");
	sp_textbox.text = "";
};

Notes on Client Support

WebView Search panel config

A string to manually configure a WebView search panel.

caption:controlsource:datatype:width:decimals[:choicelist],...

the datatype can be C,N,D,T or L (character, numeric, date, datetime, logical).

e.g.

CustomerID:customerid:C:100:0,OrderID:OrderID:N:100:0

The example_list App included in the App Builder distribution demonstrates this:

and here is the same App running in the web client in a browser:

SHOWDOCUMENT()

The following Search Panel actions can be called from the SHOWDOCUMENT() function or Lianja.showDocument() method:

Notes on Client Support

Notes on Client Support

The Section Search Panel is not supported in the Mobile Client for phones due to screen size constraints. It is supported in the Mobile Client for tablets.