Difference between revisions of "Visual Components"

From Lianjapedia
Jump to: navigation, search
(Customizing a Visual Component at runtime)
(Deployment)
 
(53 intermediate revisions by 2 users not shown)
Line 1: Line 1:
==Getting Started==
+
{{DISPLAYTITLE:Working with Visual Components}}
 +
=Overview=
 +
Visual Components allow you to create a Canvas Section or WebView/WebView based Section and save it as a component to be embedded in other UI elements with individually customized '''props''':
  
You design and build visual components in the canvas designer.
+
* Custom Sections
 +
* Custom Gadgets
 +
* WebView Sections
 +
* WebView Gadgets
 +
* Dialog Panels
 +
* Custom Search Panels
 +
* Grid Section Cells
  
* You can save a Canvas section as a custom component which can be used as a custom gadget, embedded in a cell of a grid or embedded in a cell of a formgrid section.
+
[[{{ns:file}}:visualcomponents1.png|800px|left|link={{filepath:visualcomponents1.png}}|Visual Components Overview]]
* Custom components are saved into the lib:/components/component_library/component_name directory as JavaScript code so that they can be used in Desktop, Web and Mobile Apps.
+
<br clear=all>
* When you save a canvas section as a custom component the JavaScript code is automatically generated.
+
* The name of the component is taken from the Canvas section Component Details attributes.
+
* This code should not be edited as it will be generated automatically every time changes are saved to a "Custom Component page".
+
* Components can be referenced using the notation component:/component_lib.component_name.
+
* It is best practice to make component libraries unique to your organization e.g. com_yourcompany. This will allow them to be used by other developers without causing any name clashes.
+
* When generating Web and Mobile Apps, components are included in the index.html file so there is no need to deploy them specifically.
+
  
==Embedding a Visual  Component==
+
=Creating Visual Components=
 +
Canvas Sections, Webview Sections and WebView based Sections (e.g. Report, Charts, CatalogView, DocumentView) can be saved as Visual Components.
 +
 
 +
==App Settings==
 +
===Component Library===
 +
This specifies the Component library for this App. A component that is generated is saved here unless its Component library location is specified in the section attributes.
 +
 
 +
A component library can contain one or more visual components. For Canvas Sections it is therefore important that you name your page and section with a unique name specific to that component, since the custom delegate code for the section is included in the component JavaScript file.
 +
 
 +
It is best practice to make component libraries unique to your organization e.g. com_yourcompany. This will allow them to be used by other developers without causing any name clashes.
 +
 
 +
==Canvas Sections==
 +
To save a Canvas Section as a Visual Component, make sure the Canvas Section is selected, then click the '''Sections -> Save As Component...''' menu option.
 +
 
 +
If the section's [[#Component name|Component name]] attribute is not set and this is the first time this section has been saved as a component, the 'Save As Component' dialog box will appear allowing you to enter a name for the component.
 +
 
 +
[[{{ns:file}}:vc_canvassaveas.png|800px|left|link={{filepath:vc_canvassaveas.png}}|Save Canvas Section As Component]]
 +
<br clear=all>
 +
 
 +
<div style="height:60px;margin-bottom:5px;padding:5px;border:0px solid orange;border-left:5px solid orange;background:#fff8dc;vertical-align:middle;position:relative;">
 +
[[File:bm-noteicon.png|top|40px|link=]]<div style="position:absolute;top:3px;margin-bottom;bottom:5px;margin-left:50px;"><b> Pro Tip</b>
 +
Alternatively, specify the section's [[#Component name|Component name]] attribute and the component will be created when the App is saved.<br/>
 +
</div>
 +
<span style="height:6px;"> </span>
 +
</div>
 +
 
 +
By default, the component will be saved in a component library with the same name of the App (here 'example_component'). Component libraries are located in the components directory in the library.
 +
 
 +
So my component above is saved as:
 +
 
 +
'''Windows'''
 +
<pre>C:\lianja\library\components\example_component\helloworld.js</pre>
 +
 
 +
'''Linux'''
 +
<pre>/opt/lianja/library/components/example_component/helloworld.js</pre>
 +
 
 +
Modifying the Canvas Section and clicking the '''Sections -> Save As Component...''' menu option again, overwrites the component with the changes, so the generated code should not be edited directly.
 +
 
 +
Saving the App will also update any saved components.
 +
 
 +
Canvas Sections have the following '''Visual Component Details''' attributes for the component library location and component name and additional information about the visual component.  These are saved in a .config file with the same basename and location as the component .js file, e.g.
 +
 
 +
'''Windows'''
 +
<pre>C:\lianja\library\components\example_component\helloworld.config</pre>
 +
 
 +
'''Linux'''
 +
<pre>/opt/lianja/library/components/example_component/helloworld.config</pre>
 +
 
 +
===Component library===
 +
The component library sub-directory where the component will be stored.  The default is the name of the App.
 +
 
 +
===Component name===
 +
The name of the component.  This can be specified in the attributes, or will be populated automatically after using the '''Sections -> Save As Component...''' menu option and saving and reloading the App.
 +
 
 +
===Component author===
 +
Optional author details.  This will be displayed in the [[#Component Gallery|Component Gallery]].
 +
 
 +
===Component version===
 +
Optional version details.  This will be displayed in the [[#Component Gallery|Component Gallery]].
 +
 
 +
===Component description===
 +
Optional description details.  This will be displayed in the [[#Component Gallery|Component Gallery]].
 +
 
 +
==WebView Sections==
 +
WebView Sections and WebView based Sections can also be saved as Visual Components.
 +
 
 +
WebView based Sections are as follows:
 +
* ArticleView
 +
* Calendar
 +
* CarouselView
 +
* CatalogView
 +
* Charts
 +
* CommentsView
 +
* DocumentView
 +
* GalleryView
 +
* Org Chart
 +
* Page Center
 +
* PanelView
 +
* Report
 +
* TreeView
 +
 
 +
To save a WebView/WebView based Section as a Visual Component, make sure the Section is selected, then click the '''Sections -> Save As Component...''' menu option.
 +
 
 +
If the section's [[#Component name_2|Component name]] attribute is not set and this is the first time this section has been saved as a component, the 'Save As Component' dialog box will appear allowing you to enter a name for the component.
 +
 
 +
[[{{ns:file}}:vc_webviewsaveas.png|800px|left|link={{filepath:vc_webviewsaveas.png}}|Save WebView As Component]]
 +
<br clear=all>
 +
 
 +
<div style="height:60px;margin-bottom:5px;padding:5px;border:0px solid orange;border-left:5px solid orange;background:#fff8dc;vertical-align:middle;position:relative;">
 +
[[File:bm-noteicon.png|top|40px|link=]]<div style="position:absolute;top:3px;margin-bottom;bottom:5px;margin-left:50px;"><b> Pro Tip</b>
 +
Alternatively, specify the section's [[#Component name_2|Component name]] attribute and the component will be created when the App is saved.<br/>
 +
</div>
 +
<span style="height:6px;"> </span>
 +
</div>
 +
 
 +
By default, the component will be saved in a component library with the same name of the App (here 'example_component').  Component libraries are located in the components directory in the library.
 +
 
 +
So my component above is saved as:
 +
 
 +
'''Windows'''
 +
<pre>C:\lianja\library\components\example_galleryview\employeegallery.config</pre>
 +
 
 +
'''Linux'''
 +
<pre>/opt/lianja/library/components/example_galleryview/employeegallery.config</pre>
 +
 
 +
Modifying the Section and clicking the '''Sections -> Save As Component...''' menu option again, overwrites the component with the changes, so the generated code should not be edited directly.
 +
 
 +
Saving the App will also update any saved components.
 +
 
 +
WebView/WebView based Sections have the following '''Visual Component Details''' attributes for the component library location and component name and additional information about the visual component.  These are saved in the .config file along with the URL information for the component.
 +
 
 +
===Component library===
 +
The component library sub-directory where the component will be stored.  The default is the name of the App.
 +
 
 +
===Component name===
 +
The name of the component.  This can be specified in the attributes, or will be populated automatically after using the '''Sections -> Save As Component...''' menu option and saving and reloading the App.
 +
 
 +
===Component author===
 +
Optional author details.  This will be displayed in the [[#Component Gallery|Component Gallery]].
 +
 
 +
===Component version===
 +
Optional version details.  This will be displayed in the [[#Component Gallery|Component Gallery]].
 +
 
 +
===Component description===
 +
Optional description details.  This will be displayed in the [[#Component Gallery|Component Gallery]].
 +
 
 +
=Component Gallery=
 +
The '''Component Gallery''' can be opened from the System Menu 'Window' menu options, from the ModeBar or from the [[Form Tools]].  The pulldown allows a component library to be selected and displays tiles below for each component in that library.  The component name and optional version, description and author are shown on the tile.
 +
 
 +
From the Component Gallery, you can select a component to edit or delete it.  When run from the [[Form Tools]], a component can be selected and added to the current Page as a new section. 
 +
 
 +
Select a tile to carry out an operation using the buttons:
 +
 
 +
[[{{ns:file}}:componentgallery.png|800px|left|link={{filepath:componentgallery.png}}|Component Gallery]]
 +
<br clear=all>
 +
 
 +
{| class="wikitable" width="100%"
 +
!width="20%"|Button
 +
!width="80%"|Description
 +
|-
 +
|valign="top"|EDIT
 +
|valign="top"|Opens the App where the selected component was created allowing the section to be edited.
 +
|-
 +
|valign="top"|DELETE
 +
|valign="top"|Deletes the selected component from the component library.<br>This has no effect on the original section in the App where the component was created.
 +
|-
 +
|valign="top"|CLOSE
 +
|valign="top"|Closes the Component Gallery.
 +
|-
 +
|valign="top"|DONE
 +
|valign="top"|Adds the selected component as a section (Custom or WebView) to the current Page and displays the [[#Component Attributes Editor|Component Attributes Editor]].
 +
|-
 +
|valign="top"|CANCEL
 +
|valign="top"|Closes the Component Gallery without adding the selected component as a section to the current Page.
 +
|-
 +
|}
 +
 
 +
=Using the Form Tools to Add Visual Components=
 +
==Sections==
 +
From the [[Form Tools]] '''Sections''' button, you can select a saved component and add it to the current Page as a new Section. 
 +
 
 +
If the component was created from a Canvas Section, it will be added as a JavaScript Custom Section.
 +
 
 +
If the component was created from a WebView/WebView based Section, it will be added as a WebView Section.
 +
 
 +
The [[#Component Attributes Editor|Component Attributes Editor]] will be displayed, allowing the component to be customized.
 +
 
 +
[[{{ns:file}}:vs_section_ft.png|800px|left|link={{filepath:vs_section_ft.png}}|Add Section]]
 +
<br clear=all>
 +
 
 +
==Gadgets==
 +
From the [[Form Tools]] '''Gadgets''' button, you can select a saved component and add it to the current Form Section as a new Gadget. 
 +
 
 +
If the component was created from a Canvas Section, it will be added as a JavaScript Custom Gadget.
 +
 
 +
If the component was created from a WebView/WebView based Section, it will be added as a WebView Gadget.
 +
 
 +
The [[#Component Attributes Editor|Component Attributes Editor]] will be displayed, allowing the component to be customized.
 +
 
 +
[[{{ns:file}}:vs_gadget_ft.png|800px|left|link={{filepath:vs_gadgetn_ft.png}}|Add Gadget]]
 +
<br clear=all>
 +
 
 +
=Component Attributes Editor=
 +
The '''Component Attributes Editor''' allows any editable properties of the component to be customized for this instance without affecting the original component or section.  As well as being displayed automatically when you add a Section from the [[#Component Gallery|Component Gallery]] or a Section or Gadget from the [[Form Tools]], it can be shown by clicking on the keyboard icon in the header of a component based Section or Gadget.
 +
 
 +
[[{{ns:file}}:componentattributeseditor.png|800px|left|link={{filepath:componentattributeseditor.png}}|Component Attributes Editor]]
 +
<br clear=all>
 +
 
 +
=Embedding a Visual  Component=
 
Components can be used in custom section and custom gadget code. You simply call the constructor function in JavaScript like this:
 
Components can be used in custom section and custom gadget code. You simply call the constructor function in JavaScript like this:
  
<pre>mycomponent = yourcomponentlib_componentname();</pre>
+
<code lang="javascript">mycomponent = yourcomponentlib_componentname();</code>
  
==Customizing a Visual Component at runtime==
+
=Customizing a Visual Component at Runtime=
  
When a Visual Components is instantiated you can customize the internal attributes and intercept events using delegates.
+
When a Visual Component is instantiated you can customize the internal attributes and intercept events using delegates.
  
 
<pre>
 
<pre>
 
Arguments (Optional):
 
Arguments (Optional):
  
     props           -- A string of attribute key/values separated with a ;
+
     props         -- A string of attribute key/values separated with a ;
     initFunction   -- The init delegate for this component
+
     initFunction -- The init delegate for this component
 
     loadFunction  -- The load delegate for this component
 
     loadFunction  -- The load delegate for this component
 
     readyFunction -- The ready delegate for this component
 
     readyFunction -- The ready delegate for this component
 
</pre>
 
</pre>
  
Example:
+
==Using "props"==
 
+
<code lang="javascript">
<pre>
+
 
var cont = example_component_barrytest("field1.table=customers;field3.backcolor=red;")
 
var cont = example_component_barrytest("field1.table=customers;field3.backcolor=red;")
 
return cont;
 
return cont;
</pre>
+
</code>
  
So as you can see its quite easy to use components from your component libraries in custom sections and gadgets.
+
==In the "init" function==
  
==App Settings==
+
<code lang="javascript">
 +
var cont = example_component_barrytest(undefined, function(self)  // initFunction -- "self" is a reference to the component
 +
{
 +
    // reference the UI controls of the component by name using self.controls("name")
 +
    var field3 = self.controls("field3");
 +
    // you can reference the attributes and call methods on any of the UI elements in the
 +
    // canvas section which is now embedded in a  "container"
 +
    field3.backcolor = "red";
 +
    // you can hide UI elements in the container like this
 +
    var field1 = self.controls("field1");
 +
    field1.hide();
 +
    // you can add new UI elements to the container like this (runtime inheritance)
 +
    self.addObject('mytextbox','Textbox');
 +
    mytextbox.name = 'mytextbox';
 +
    mytextbox.top = 19;
 +
    mytextbox.right = 4;
 +
    mytextbox.width = 110;
 +
    mytextbox.controlsource = "customers.customerid";
 +
});
 +
return cont;
 +
</code>
  
===Component library===
+
=Dialog Panels=
This specifies the Component library for this App. Components that are generated are saved here.
+
Visual components can be embedded in [[Lianja]].showDialog() and [[Lianja]].showDialogPanel() dialog panels.  This includes the ability to customize the component "props", e.g. for a Canvas Section based component called ''barrytest'' in the ''example_component'' component library:
  
===Components===
+
<pre>Lianja.showDialog("Title",
This specifies the Components needed for this App. Separate each with a ';' to specify more than one, e.g.
+
  "component:/example_component.barrytest('field3.backcolor=red; field3.forecolor=yellow;')",0,0)</pre>
 +
 
 +
<pre>Lianja.showDialogPanel("Title",
 +
  "component:/example_component.barrytest('field3.backcolor=red; field3.forecolor=yellow;'')","50%")</pre>
 +
 
 +
and for a WebView based component called ''barrytest_chart'' in the ''example_component'' component library:
 +
 
 +
<pre>Lianja.showDialog("Component",
 +
  "component:/example_component.barrytest_chart?title=This is a chart&backcolor=lightblue",0,0,true)</pre>
 +
 
 +
<pre>Lianja.showDialogPanel("Component",
 +
  "component:/example_component.barrytest_chart?title=This is a chart&backcolor=lightblue","50%")</pre>
 +
 
 +
=Custom Search Panels=
 +
Canvas Section based visual components can be embedded in custom [[Section Search Panels]].  Specify the Section 'Custom search panel' attribute as follows with optional "props" customization:
 +
 
 +
<pre>component:/component-library.component-name('props1=value;props2=value;')</pre>
 +
 
 +
e.g.
 +
 
 +
<pre>component:/example_component.barrytest('field3.backcolor=red;field3.forecolor=yellow;')</pre>
 +
 
 +
=Grid Section Cells=
 +
Canvas Section based visual components can be embedded in Grid Section Cells.  Specify the Column 'Custom cell editor' and/or 'Custom cell display' attributes as follows with optional "props" customization:
 +
 
 +
<pre>component:/component-library.component-name('props1=value;props2=value;')</pre>
 +
 
 +
e.g.
 +
 
 +
<pre>component:/example_component.barrytest('field3.backcolor=red;field3.forecolor=yellow;')</pre>
 +
 
 +
See [[Custom Renderers and Custom Editors]] for alternative ways to specify custom renderers and custom editors.
 +
 
 +
=App Settings=
 +
 
 +
==Components==
 +
This specifies the Components needed for the App. Separate each with a ';' to specify more than one, e.g.
 
<pre>example_component.name;example_component.*</pre>
 
<pre>example_component.name;example_component.*</pre>
 +
 +
=Deployment=
 +
When generating Web and Mobile Apps, components are included in the index.html file so there is no need to deploy them manually.
 +
 +
Component libraries are listed under '''Components''' in the [[Deploy Files]] tab in the [[App Inspector]] or [[Deploy Workspace]] to allow them to be deployed for desktop Apps or to be added to [[Lianja Package Files]].
 +
 +
=Team Development and Collaboration=
 +
 +
Team members can package up components into Lianja packages and them upload these to the '''Team Repo''' in the '''Deploy''' workspace.
 +
 +
[[{{ns:file}}: team_repo.png |800px|left|link={{filepath:team_repo.png}}|Install/Upload to Team Repo]]
 +
 +
 +
 +
[[{{ns:file}}: team_workspace.png |800px|left|link={{filepath:team_workspace.png}}|Install/Update from Team Repo]]
 +
  
 
[[Category:Lianja v5.0]]
 
[[Category:Lianja v5.0]]
 +
[[Category:Lianja v5.3]]

Latest revision as of 05:28, 17 February 2020

Overview

Visual Components allow you to create a Canvas Section or WebView/WebView based Section and save it as a component to be embedded in other UI elements with individually customized props:

  • Custom Sections
  • Custom Gadgets
  • WebView Sections
  • WebView Gadgets
  • Dialog Panels
  • Custom Search Panels
  • Grid Section Cells
Visual Components Overview


Creating Visual Components

Canvas Sections, Webview Sections and WebView based Sections (e.g. Report, Charts, CatalogView, DocumentView) can be saved as Visual Components.

App Settings

Component Library

This specifies the Component library for this App. A component that is generated is saved here unless its Component library location is specified in the section attributes.

A component library can contain one or more visual components. For Canvas Sections it is therefore important that you name your page and section with a unique name specific to that component, since the custom delegate code for the section is included in the component JavaScript file.

It is best practice to make component libraries unique to your organization e.g. com_yourcompany. This will allow them to be used by other developers without causing any name clashes.

Canvas Sections

To save a Canvas Section as a Visual Component, make sure the Canvas Section is selected, then click the Sections -> Save As Component... menu option.

If the section's Component name attribute is not set and this is the first time this section has been saved as a component, the 'Save As Component' dialog box will appear allowing you to enter a name for the component.

Save Canvas Section As Component


Bm-noteicon.png
Pro Tip

Alternatively, specify the section's Component name attribute and the component will be created when the App is saved.

By default, the component will be saved in a component library with the same name of the App (here 'example_component'). Component libraries are located in the components directory in the library.

So my component above is saved as:

Windows

C:\lianja\library\components\example_component\helloworld.js

Linux

/opt/lianja/library/components/example_component/helloworld.js

Modifying the Canvas Section and clicking the Sections -> Save As Component... menu option again, overwrites the component with the changes, so the generated code should not be edited directly.

Saving the App will also update any saved components.

Canvas Sections have the following Visual Component Details attributes for the component library location and component name and additional information about the visual component. These are saved in a .config file with the same basename and location as the component .js file, e.g.

Windows

C:\lianja\library\components\example_component\helloworld.config

Linux

/opt/lianja/library/components/example_component/helloworld.config

Component library

The component library sub-directory where the component will be stored. The default is the name of the App.

Component name

The name of the component. This can be specified in the attributes, or will be populated automatically after using the Sections -> Save As Component... menu option and saving and reloading the App.

Component author

Optional author details. This will be displayed in the Component Gallery.

Component version

Optional version details. This will be displayed in the Component Gallery.

Component description

Optional description details. This will be displayed in the Component Gallery.

WebView Sections

WebView Sections and WebView based Sections can also be saved as Visual Components.

WebView based Sections are as follows:

  • ArticleView
  • Calendar
  • CarouselView
  • CatalogView
  • Charts
  • CommentsView
  • DocumentView
  • GalleryView
  • Org Chart
  • Page Center
  • PanelView
  • Report
  • TreeView

To save a WebView/WebView based Section as a Visual Component, make sure the Section is selected, then click the Sections -> Save As Component... menu option.

If the section's Component name attribute is not set and this is the first time this section has been saved as a component, the 'Save As Component' dialog box will appear allowing you to enter a name for the component.

Save WebView As Component


Bm-noteicon.png
Pro Tip

Alternatively, specify the section's Component name attribute and the component will be created when the App is saved.

By default, the component will be saved in a component library with the same name of the App (here 'example_component'). Component libraries are located in the components directory in the library.

So my component above is saved as:

Windows

C:\lianja\library\components\example_galleryview\employeegallery.config

Linux

/opt/lianja/library/components/example_galleryview/employeegallery.config

Modifying the Section and clicking the Sections -> Save As Component... menu option again, overwrites the component with the changes, so the generated code should not be edited directly.

Saving the App will also update any saved components.

WebView/WebView based Sections have the following Visual Component Details attributes for the component library location and component name and additional information about the visual component. These are saved in the .config file along with the URL information for the component.

Component library

The component library sub-directory where the component will be stored. The default is the name of the App.

Component name

The name of the component. This can be specified in the attributes, or will be populated automatically after using the Sections -> Save As Component... menu option and saving and reloading the App.

Component author

Optional author details. This will be displayed in the Component Gallery.

Component version

Optional version details. This will be displayed in the Component Gallery.

Component description

Optional description details. This will be displayed in the Component Gallery.

Component Gallery

The Component Gallery can be opened from the System Menu 'Window' menu options, from the ModeBar or from the Form Tools. The pulldown allows a component library to be selected and displays tiles below for each component in that library. The component name and optional version, description and author are shown on the tile.

From the Component Gallery, you can select a component to edit or delete it. When run from the Form Tools, a component can be selected and added to the current Page as a new section.

Select a tile to carry out an operation using the buttons:

Component Gallery


Button Description
EDIT Opens the App where the selected component was created allowing the section to be edited.
DELETE Deletes the selected component from the component library.
This has no effect on the original section in the App where the component was created.
CLOSE Closes the Component Gallery.
DONE Adds the selected component as a section (Custom or WebView) to the current Page and displays the Component Attributes Editor.
CANCEL Closes the Component Gallery without adding the selected component as a section to the current Page.

Using the Form Tools to Add Visual Components

Sections

From the Form Tools Sections button, you can select a saved component and add it to the current Page as a new Section.

If the component was created from a Canvas Section, it will be added as a JavaScript Custom Section.

If the component was created from a WebView/WebView based Section, it will be added as a WebView Section.

The Component Attributes Editor will be displayed, allowing the component to be customized.

Add Section


Gadgets

From the Form Tools Gadgets button, you can select a saved component and add it to the current Form Section as a new Gadget.

If the component was created from a Canvas Section, it will be added as a JavaScript Custom Gadget.

If the component was created from a WebView/WebView based Section, it will be added as a WebView Gadget.

The Component Attributes Editor will be displayed, allowing the component to be customized.

Add Gadget


Component Attributes Editor

The Component Attributes Editor allows any editable properties of the component to be customized for this instance without affecting the original component or section. As well as being displayed automatically when you add a Section from the Component Gallery or a Section or Gadget from the Form Tools, it can be shown by clicking on the keyboard icon in the header of a component based Section or Gadget.

Component Attributes Editor


Embedding a Visual Component

Components can be used in custom section and custom gadget code. You simply call the constructor function in JavaScript like this:

mycomponent = yourcomponentlib_componentname();

Customizing a Visual Component at Runtime

When a Visual Component is instantiated you can customize the internal attributes and intercept events using delegates.

Arguments (Optional):

    props         -- A string of attribute key/values separated with a ;
    initFunction  -- The init delegate for this component
    loadFunction  -- The load delegate for this component
    readyFunction -- The ready delegate for this component

Using "props"

var cont = example_component_barrytest("field1.table=customers;field3.backcolor=red;")
return cont;

In the "init" function

var cont = example_component_barrytest(undefined, function(self)  // initFunction -- "self" is a reference to the component
{
    // reference the UI controls of the component by name using self.controls("name")
    var field3 = self.controls("field3");
    // you can reference the attributes and call methods on any of the UI elements in the 
    // canvas section which is now embedded in a  "container"
    field3.backcolor = "red";
    // you can hide UI elements in the container like this
    var field1 = self.controls("field1");
    field1.hide();
    // you can add new UI elements to the container like this (runtime inheritance)
    self.addObject('mytextbox','Textbox');
    mytextbox.name = 'mytextbox';
    mytextbox.top = 19;
    mytextbox.right = 4;
    mytextbox.width = 110;
    mytextbox.controlsource = "customers.customerid";
});
return cont;

Dialog Panels

Visual components can be embedded in Lianja.showDialog() and Lianja.showDialogPanel() dialog panels. This includes the ability to customize the component "props", e.g. for a Canvas Section based component called barrytest in the example_component component library:

Lianja.showDialog("Title",
   "component:/example_component.barrytest('field3.backcolor=red; field3.forecolor=yellow;')",0,0)
Lianja.showDialogPanel("Title",
   "component:/example_component.barrytest('field3.backcolor=red; field3.forecolor=yellow;'')","50%")

and for a WebView based component called barrytest_chart in the example_component component library:

Lianja.showDialog("Component",
   "component:/example_component.barrytest_chart?title=This is a chart&backcolor=lightblue",0,0,true)
Lianja.showDialogPanel("Component", 
   "component:/example_component.barrytest_chart?title=This is a chart&backcolor=lightblue","50%")

Custom Search Panels

Canvas Section based visual components can be embedded in custom Section Search Panels. Specify the Section 'Custom search panel' attribute as follows with optional "props" customization:

component:/component-library.component-name('props1=value;props2=value;')

e.g.

component:/example_component.barrytest('field3.backcolor=red;field3.forecolor=yellow;')

Grid Section Cells

Canvas Section based visual components can be embedded in Grid Section Cells. Specify the Column 'Custom cell editor' and/or 'Custom cell display' attributes as follows with optional "props" customization:

component:/component-library.component-name('props1=value;props2=value;')

e.g.

component:/example_component.barrytest('field3.backcolor=red;field3.forecolor=yellow;')

See Custom Renderers and Custom Editors for alternative ways to specify custom renderers and custom editors.

App Settings

Components

This specifies the Components needed for the App. Separate each with a ';' to specify more than one, e.g.

example_component.name;example_component.*

Deployment

When generating Web and Mobile Apps, components are included in the index.html file so there is no need to deploy them manually.

Component libraries are listed under Components in the Deploy Files tab in the App Inspector or Deploy Workspace to allow them to be deployed for desktop Apps or to be added to Lianja Package Files.

Team Development and Collaboration

Team members can package up components into Lianja packages and them upload these to the Team Repo in the Deploy workspace.

Install/Upload to Team Repo


Install/Update from Team Repo