Difference between revisions of "Visual Components"

From Lianjapedia
Jump to: navigation, search
(Getting Started)
(2 intermediate revisions by the same user not shown)
Line 1: Line 1:
==Saving Canvas Sections as Custom Components==
+
==Getting Started==
  
* Added the ability to 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.
+
You design and build visual components in the canvas designer.
 +
 
 +
* 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.
 
* 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.
 
* 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.
 
* When you save a canvas section as a custom component the JavaScript code is automatically generated.
 
* When you save a canvas section as a custom component the JavaScript code is automatically generated.
Line 9: Line 11:
 
* 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.
 
* 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.
 
* When generating Web and Mobile Apps, components are included in the index.html file so there is no need to deploy them specifically.
* Components can also be used in custom section and custom gadget code. You simply call the constructor function in JavaScript like this:
+
 
 +
==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:
  
 
<pre>mycomponent = yourcomponentlib_componentname();</pre>
 
<pre>mycomponent = yourcomponentlib_componentname();</pre>
 +
 +
==Customizing a Visual Component at runtime using props==
 +
 +
TBA
  
 
==App Settings==
 
==App Settings==

Revision as of 19:46, 15 January 2020

Getting Started

You design and build visual components in the canvas designer.

  • 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.
  • 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.
  • 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

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 using props

TBA

App Settings

Component library

This specifies the Component library for this App. Components that are generated are saved here.

Components

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

example_component.name;example_component.*