Section Search Panels

From Lianjapedia
Revision as of 05:27, 13 May 2018 by Barrymavin (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

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

SHOWDOCUMENT()

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

Action Description
showsearchpanel Show the Search Panel for the Section
hidesearchpanel Hide the Search Panel for the Section
togglesearchpanel Show the Search Panel for the Section if currently hidden, hide the Search Panel for the Section if currently shown

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.

Attribute Notes
Visible Lianja.getElementByID("page.section").searchpanelvisible is exposed on the Desktop Client only (Lianja/VFP, JavaScript).
Width The Width is supported on the Desktop client only.
Height -
Background color The Background color is supported on the Desktop client only.
Foreground color The Foreground color is supported on the Desktop client only.
Auto create Auto create support in Canvas Sections introduced in v1.3.1.
Custom search panel -