Objects: Difference between revisions

From nuBuilderForte
Jump to navigation Jump to search
No edit summary
Line 13: Line 13:




==All Properties==
=All Properties=


===Tab-Form===
==Tab-Form==
Select the Tab (and therefore the Edit Form it belongs to.) to add this Object to.
Select the Tab (and therefore the Edit Form it belongs to.) to add this Object to.


===Type===
==Type==
Choose 1 of the following 11 types.
Choose 1 of the following 11 types.
*<span style="padding:4px 6px 4px 2px;background:#B6B6B4">Calc</span> A Number Field that value is based on other Number Objects of the current Edit Form.
*<span style="padding:4px 6px 4px 2px;background:#B6B6B4">Calc</span> A Number Field that value is based on other Number Objects of the current Edit Form.
Line 32: Line 32:
*<span style="padding:4px 6px 4px 2px;background:#68c994">Word</span> A readonly object that simply creates a phrase in Bold.
*<span style="padding:4px 6px 4px 2px;background:#68c994">Word</span> A readonly object that simply creates a phrase in Bold.


===Label===
==Label==
Description of Object.
Description of Object.


===ID===
==ID==
A valid HTML element id that is unique to this Edit Form.
A valid HTML element id that is unique to this Edit Form.


===Top===
==Top==
Value in pixels.
Value in pixels.


===Left===
==Left==
Value in pixels.
Value in pixels.


===Width===
==Width==
Value in pixels.
Value in pixels.


===Height===
==Height==
Value in pixels.
Value in pixels.


===Cloneable===
==Cloneable==
Yes or No.  
Yes or No.  


Line 65: Line 65:
*<span style="padding:4px 6px 4px 2px;background:#babedb">Textarea</span>
*<span style="padding:4px 6px 4px 2px;background:#babedb">Textarea</span>


===Align===
==Align==
Left, Right or Center.
Left, Right or Center.


Line 76: Line 76:
*<span style="padding:4px 6px 4px 2px;background:#68c994">Word</span>
*<span style="padding:4px 6px 4px 2px;background:#68c994">Word</span>


===Validation===
==Validation==
None, No Blanks or No Duplicates.
None, No Blanks or No Duplicates.


Line 86: Line 86:
*<span style="padding:4px 6px 4px 2px;background:#babedb">Textarea</span>
*<span style="padding:4px 6px 4px 2px;background:#babedb">Textarea</span>


===Access===
==Access==
Editable, Readonly or Hidden.
Editable, Readonly or Hidden.


==Run==
=Run=


===Run===  
==Run==  
Choose Form, Report or Procedure to run.
Choose Form, Report or Procedure to run.
===Filter===
==Filter==
A string that will be used like the '''Search''' field to filter Browse records.
A string that will be used like the '''Search''' field to filter Browse records.


[[Hash Variables]] can be used in this string.
[[Hash Variables]] can be used in this string.


===Record ID===
==Record ID==
Entering a Record ID will make the record with the matching ID display in an Edit Form (skipping the Browse Form)
Entering a Record ID will make the record with the matching ID display in an Edit Form (skipping the Browse Form)


===Method===
==Method==
Choose Button or iFrame.
Choose Button or iFrame.


Line 108: Line 108:
'''iFrame''' will mash an iFrame into the existing Edit Form that will display the Form, Report or Procedure.
'''iFrame''' will mash an iFrame into the existing Edit Form that will display the Form, Report or Procedure.


==Display==
=Display=


===SQL===
==SQL==
A valid SQL query that will display the first field of the first record.
A valid SQL query that will display the first field of the first record.


Line 119: Line 119:
eg. SELECT cus_name FROM customer WHERE customer_id = '#RECORD_ID#'
eg. SELECT cus_name FROM customer WHERE customer_id = '#RECORD_ID#'


==Select==
=Select=


===Multiple===  
==Multiple==  
Choosing Yes will allow for more than 1 selection from a visible list.
Choosing Yes will allow for more than 1 selection from a visible list.
Choosing No will allow for only 1 selection from a dropdown list.
Choosing No will allow for only 1 selection from a dropdown list.


===SQL or List===
==SQL or List==
*'''SQL''' A valid SQL query that returns 2 columns - If you want any help building SQL, the SQL Button will direct you to nuBuilder's [[SQL Builder]].
*'''SQL''' A valid SQL query that returns 2 columns - If you want any help building SQL, the SQL Button will direct you to nuBuilder's [[SQL Builder]].
OR
OR
Line 131: Line 131:
eg. 0|No|1|Yes
eg. 0|No|1|Yes


==Lookup==
=Lookup=
A Lookup Object can find and display a record selected from another Browse Form.
A Lookup Object can find and display a record selected from another Browse Form.


The '''After Browse''' Button allows PHP code to be run, after a record is selected but before any custom Javascript runs.
The '''After Browse''' Button allows PHP code to be run, after a record is selected but before any custom Javascript runs.


===Form===  
==Form==  
Firstly select a previously created nuBuilder Form.
Firstly select a previously created nuBuilder Form.


===Code===
==Code==
Scroll though to choose the Field to display as the ''lookupable'' Code from the list of possible fields.
Scroll though to choose the Field to display as the ''lookupable'' Code from the list of possible fields.


===Description===
==Description==
Scroll though to choose the Field to display as the Description from the list of possible fields.
Scroll though to choose the Field to display as the Description from the list of possible fields.


===Width===
==Width==
The width of the Description field in pixels.
The width of the Description field in pixels.


===Javascript===
==Javascript==
Javascript that will be run after a selection has been made.
Javascript that will be run after a selection has been made.


==Subform==
=Subform=


===Form===  
==Form==  
Firstly select a previously created nuBuilder Form.
Firstly select a previously created nuBuilder Form.


===Foreign Key===  
==Foreign Key==  
Scroll though to choose the Foreign Key from the list of possible fields.
Scroll though to choose the Foreign Key from the list of possible fields.


===Addable===
==Addable==
Select Yes or No
Select Yes or No
===Deleteable===
==Deleteable==
Select Yes or No
Select Yes or No
===Type===
==Type==
Select Grid or Form.
Select Grid or Form.


Line 172: Line 172:
*A Grid where each Object is placed in order side by side, making the height of each ''Form'' smaller.
*A Grid where each Object is placed in order side by side, making the height of each ''Form'' smaller.


==Image==
=Image=


The Image Object is an easy way to display an image stored in nuBuilder [[Files]].
The Image Object is an easy way to display an image stored in nuBuilder [[Files]].


===Image===
==Image==


Choose from previously saved images.
Choose from previously saved images.


==Input==
=Input=
A nuBuilder Input allow for most HTML5 input types as well as 4 types just available in nuBulder Forte.
A nuBuilder Input allow for most HTML5 input types as well as 4 types just available in nuBulder Forte.


Each of these 4 Objects need extra information, and will display an extra Object when selected.
Each of these 4 Objects need extra information, and will display an extra Object when selected.


===nuDate===
==nuDate==
*Format - Will display an Object allowing you to choose from a list of customisable [[Formats]]
*Format - Will display an Object allowing you to choose from a list of customisable [[Formats]]


===nuAutoNumber===
==nuAutoNumber==
*Javascript Array - The number this Autonumber will start from.
*Javascript Array - The number this Autonumber will start from.


===nuNumber===
==nuNumber==
*Format - Will display an Object allowing you to choose from a list of customisable [[Formats]]
*Format - Will display an Object allowing you to choose from a list of customisable [[Formats]]


===nuScroll===  
==nuScroll==  
*Javascript Array - The number this AutoNumber will start from.
*Javascript Array - The number this AutoNumber will start from.


That will allow the user to scroll through a list using keyboard up and down arrows.
That will allow the user to scroll through a list using keyboard up and down arrows.


===Other HTML5 types===
==Other HTML5 types==
*Button
*Button
*Checkbox
*Checkbox
Line 221: Line 221:
*Week
*Week


==HTML==
=HTML=
This will display any html that can be put in a DIV.
This will display any html that can be put in a DIV.


[[Hash Variables]] can be used here to change this HTML before it is run.
[[Hash Variables]] can be used here to change this HTML before it is run.


==Calc==
=Calc=


A Calc Object is a numberic field that will be recalculated after any onchange event.
A Calc Object is a numberic field that will be recalculated after any onchange event.


===Format===
==Format==
Choose from a list of customisable [[Formats]]
Choose from a list of customisable [[Formats]]


===Formula===
==Formula==
The Formula for this calculation is simply created  by clicking a combination of the '''Objects''' Object and the '''Operators''' Object.
The Formula for this calculation is simply created  by clicking a combination of the '''Objects''' Object and the '''Operators''' Object.


Line 242: Line 242:
Options not containing a '''.''' refer to an Object on the Edit Form eg.'''inv_total'''
Options not containing a '''.''' refer to an Object on the Edit Form eg.'''inv_total'''


==Custom Code==
=Custom Code=


If an Object has a Javascript event, the Custom Code Tab will be in bold.
If an Object has a Javascript event, the Custom Code Tab will be in bold.
Line 252: Line 252:
*afterinsertrow
*afterinsertrow


===Javascript===
==Javascript==
*'''Event'''
*'''Event'''
A valid event name.
A valid event name.

Revision as of 00:45, 8 July 2017

Adding Objects to your Edit Form will allow you to display and edit a record's data.

Each type of Object has a different purpose.

You can use Arrange Objects to rearrange Objects you have placed on the Form along with their tabbing order.


The All Tab contains information required by all Objects (with a few exceptions).

The Custom Code Tab allows Javascript events to be added to all Objects (with a few exceptions).

All other Tabs relate specifically to the Object of the same name.


All Properties

Tab-Form

Select the Tab (and therefore the Edit Form it belongs to.) to add this Object to.

Type

Choose 1 of the following 11 types.

  • Calc A Number Field that value is based on other Number Objects of the current Edit Form.
  • Display A readonly field that will display the first field of the first record from a SQL Select statement
  • HTML A readonly area that can be used to display html.
  • Image A readonly area that will display an image.
  • Input Generally used for entering text, it can also be used for other HTML5 Input types. Along with some types exclusive to nuBuilder.
  • Lookup A lookup allowing the selection of a value from another table.
  • Run Creates either a Button to allow the user to run another Form/Report or Procedure, or creates an iFrame on the Edit Form in which a Form/Report or Procedure is placed.
  • Select Allows the selection of one or more values from a finite list.
  • Subform Can contain rows (Subform Forms) that relate to the Edit Form.
  • Textarea Allows for unformatted text.
  • Word A readonly object that simply creates a phrase in Bold.

Label

Description of Object.

ID

A valid HTML element id that is unique to this Edit Form.

Top

Value in pixels.

Left

Value in pixels.

Width

Value in pixels.

Height

Value in pixels.

Cloneable

Yes or No.

In the case of Yes on a customer field, when an invoice is cloned the customer name is retained.

But an invoice number field would be set to No so that any cloned invoice could get a new number.

Used by..

  • Calc
  • Input
  • Lookup
  • Select
  • Textarea

Align

Left, Right or Center.

Used by..

  • Calc
  • Display
  • Input
  • Textarea
  • Word

Validation

None, No Blanks or No Duplicates.

Used by..

  • Input
  • Lookup
  • Select
  • Textarea

Access

Editable, Readonly or Hidden.

Run

Run

Choose Form, Report or Procedure to run.

Filter

A string that will be used like the Search field to filter Browse records.

Hash Variables can be used in this string.

Record ID

Entering a Record ID will make the record with the matching ID display in an Edit Form (skipping the Browse Form)

Method

Choose Button or iFrame.

Button will create a button that will take you to the Form, Report or Procedure.

iFrame will mash an iFrame into the existing Edit Form that will display the Form, Report or Procedure.

Display

SQL

A valid SQL query that will display the first field of the first record.

If you want any help building SQL, the SQL Button will direct you to nuBuilder's SQL Builder.

Hash Variables can be used within the SQL statement.

eg. SELECT cus_name FROM customer WHERE customer_id = '#RECORD_ID#'

Select

Multiple

Choosing Yes will allow for more than 1 selection from a visible list. Choosing No will allow for only 1 selection from a dropdown list.

SQL or List

  • SQL A valid SQL query that returns 2 columns - If you want any help building SQL, the SQL Button will direct you to nuBuilder's SQL Builder.

OR

  • List A list delimited by |

eg. 0|No|1|Yes

Lookup

A Lookup Object can find and display a record selected from another Browse Form.

The After Browse Button allows PHP code to be run, after a record is selected but before any custom Javascript runs.

Form

Firstly select a previously created nuBuilder Form.

Code

Scroll though to choose the Field to display as the lookupable Code from the list of possible fields.

Description

Scroll though to choose the Field to display as the Description from the list of possible fields.

Width

The width of the Description field in pixels.

Javascript

Javascript that will be run after a selection has been made.

Subform

Form

Firstly select a previously created nuBuilder Form.

Foreign Key

Scroll though to choose the Foreign Key from the list of possible fields.

Addable

Select Yes or No

Deleteable

Select Yes or No

Type

Select Grid or Form.

Inside a Subform, records are repeated either as a

  • Form which displays the same as an Edit Form.

OR

  • A Grid where each Object is placed in order side by side, making the height of each Form smaller.

Image

The Image Object is an easy way to display an image stored in nuBuilder Files.

Image

Choose from previously saved images.

Input

A nuBuilder Input allow for most HTML5 input types as well as 4 types just available in nuBulder Forte.

Each of these 4 Objects need extra information, and will display an extra Object when selected.

nuDate

  • Format - Will display an Object allowing you to choose from a list of customisable Formats

nuAutoNumber

  • Javascript Array - The number this Autonumber will start from.

nuNumber

  • Format - Will display an Object allowing you to choose from a list of customisable Formats

nuScroll

  • Javascript Array - The number this AutoNumber will start from.

That will allow the user to scroll through a list using keyboard up and down arrows.

Other HTML5 types

  • Button
  • Checkbox
  • Color
  • Datetime-Local
  • Email
  • File
  • Hidden
  • Image
  • Month
  • Number
  • Password
  • Radio
  • Range
  • Reset
  • Search
  • Telephone
  • Text
  • Time
  • URL
  • Week

HTML

This will display any html that can be put in a DIV.

Hash Variables can be used here to change this HTML before it is run.

Calc

A Calc Object is a numberic field that will be recalculated after any onchange event.

Format

Choose from a list of customisable Formats

Formula

The Formula for this calculation is simply created by clicking a combination of the Objects Object and the Operators Object.

Objects is a list of available Number Fields on the Edit Form.

Options containing a . refer to the Subform Name and the Object on that Subform. And will total up all values for that Object eg. invoice_item_sf.ite_total

Options not containing a . refer to an Object on the Edit Form eg.inv_total

Custom Code

If an Object has a Javascript event, the Custom Code Tab will be in bold.

These events are standard HTML5 events such as onclick or onchange.

The exception to this is a Subform Object which has ony 2 events.

  • beforeinsertrow
  • afterinsertrow

Javascript

  • Event

A valid event name.

  • Javascript

A Input Object (text field) containing Javascript code.

To edit this, double click on the field and you will open Ace Editor in a full screen.