Difference between revisions of "Section Search Panels"
Yvonne.milne (Talk | contribs) |
Yvonne.milne (Talk | contribs) (→Custom search panel) |
||
(10 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
− | + | 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. | |
− | + | ||
− | Sections can have a Search Panel. 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. | Double-click on the Section header or click the cog icon to access the Section Attributes. Scroll down to the Search Panel sub-section. | ||
Line 21: | Line 19: | ||
<br clear=all> | <br clear=all> | ||
− | + | The Visible attribute can be queried or changed programmatically using [[Working with the Lianja Object Model|Lianja.getElementByID("page.section").searchpanelvisible]]. | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | The | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
[[#Notes on Client Support|Notes on Client Support]] | [[#Notes on Client Support|Notes on Client Support]] | ||
Line 131: | Line 108: | ||
<br clear=all> | <br clear=all> | ||
− | + | ===Lianja/VFP function example=== | |
<code lang="recital"> | <code lang="recital"> | ||
Line 154: | Line 131: | ||
sp_label.text = "Company Name" | sp_label.text = "Company Name" | ||
sp_container.addObject("osp_textbox", "textbox") | sp_container.addObject("osp_textbox", "textbox") | ||
+ | public sp_textbox | ||
sp_textbox = osp_textbox | sp_textbox = osp_textbox | ||
osp_textbox.move(85, 3, 100, 20) | osp_textbox.move(85, 3, 100, 20) | ||
Line 169: | Line 147: | ||
</code> | </code> | ||
− | + | ===JavaScript function example=== | |
<code lang="javascript"> | <code lang="javascript"> | ||
Line 210: | Line 188: | ||
[[#Notes on Client Support|Notes on Client Support]] | [[#Notes on Client Support|Notes on Client Support]] | ||
+ | |||
+ | ==WebView Search panel config== | ||
+ | A string to manually configure a WebView search panel. | ||
+ | <pre>caption:controlsource:datatype:width:decimals[:choicelist],...</pre> | ||
+ | the datatype can be C,N,D,T or L (character, numeric, date, datetime, logical). | ||
+ | |||
+ | e.g. | ||
+ | <pre>CustomerID:customerid:C:100:0,OrderID:OrderID:N:100:0</pre> | ||
+ | |||
+ | The example_list App included in the App Builder distribution demonstrates this: | ||
+ | |||
+ | [[{{ns:file}}:webviewsearchpanel1.png|800px|left|border|link={{filepath:webviewsearchpanel1.png}}|WebView Search Panel]] | ||
+ | <br clear=all> | ||
+ | |||
+ | and here is the same App running in the web client in a browser: | ||
+ | |||
+ | [[{{ns:file}}:webviewsearchpanel2.png|800px|left|border|link={{filepath:webviewsearchpanel2.png}}|WebView Search Panel]] | ||
+ | <br clear=all> | ||
==SHOWDOCUMENT()== | ==SHOWDOCUMENT()== | ||
Line 230: | Line 226: | ||
==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. | ||
{| class="wikitable" width="100%" | {| class="wikitable" width="100%" | ||
Line 235: | Line 232: | ||
!width="80%"|Notes | !width="80%"|Notes | ||
|- | |- | ||
− | |valign="top"|Visible|| | + | |valign="top"|Visible||Lianja.getElementByID("page.section").searchpanelvisible is exposed on the Desktop Client only (Lianja/VFP, JavaScript). |
|- | |- | ||
|valign="top"|Width||The Width is supported on the Desktop client only. | |valign="top"|Width||The Width is supported on the Desktop client only. | ||
Line 247: | Line 244: | ||
|valign="top"|Auto create||- | |valign="top"|Auto create||- | ||
|- | |- | ||
− | |valign="top"|Custom search panel|| | + | |valign="top"|Custom search panel||- |
+ | |- | ||
+ | |valign="top"|WebView Search panel config||- | ||
|- | |- | ||
|} | |} | ||
[[Category:Attribute Categories]] | [[Category:Attribute Categories]] | ||
+ | [[Category:Sections]] | ||
+ | [[Category:SectionAnatomy]] | ||
+ | [[Category:Lianja v6.0]] |
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.
Contents
Visible
By default, the Section Search Panel is not visible.
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.
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.
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.
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.
Auto create
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.
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.
Auto create can now be enabled in the attributes for the Section.
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 = ""; };
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:
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
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 | - |
Custom search panel | - |
WebView Search panel config | - |