VisualNEO Web - neoTable Plugin Tutorial Part 1
neoTable 1
Author name
1.1
Tutorial (part 1) for neoTable Plugin
Samsung Galaxy Tab 7
[ageArray],[currentEventData],[currentLoggedEventsObject],[downloadPage],[filterObject('age')],[filterObject('surname')],[filterObject],[idnumber],[jo],[jsonObj],[mydata],[neoTableEvent],[neoTableField],[neoTablePage],[neoTableRow],[neoTableRowString],[neoTableSearch],[thisEventData],[thisField],[thisResult],[thisRow],[tutorialAuthor],[tutorialComponent],[tutorialPageTitle],[tutorialPublicationDate],[tutorialsPage],[tutorialVersion],[websiteAuthor]
True
1024
600
False
False
False
False
WebApp
False
C:\Users\rocco\Documents\VisualNeoWeb\Libraries\img\default-icon.png
.thead{
background-color:#eaeaea;
}
.pages{
background:#E0E0E0;
overflow:hidden;
}
strong, b{
color:#ed792f;
}
h1 strong,h2 strong,h3 strong{
color:#ed792f;
}
h1 b,h2 b,h3 b{
color:#ed792f;
}
.logoimage {
border-radius: 42px;
}
en
standalone
Offline page
#000000
[AndroidOS,iOS,WindowsPhoneOS]
normal
True
True
False
True
True
False
False
True
False
False
... align top of pages with top of Browser Content Area; DO NOT ALTER
TopCenterApp
... these variables are used in the BackCover page; DO NOT ALTER
SetVar [downloadPage] "https://visualneo.com/product/visualneo-web"
SetVar [tutorialsPage] "https://www.visualneo.com/tutorials"
... setup your Tutorial parameters here
SetVar [tutorialComponent] "neoTable (Part 1)"
SetVar [tutorialVersion] "1.3"
SetVar [tutorialPublicationDate] "01-APR-2019"
SetVar [tutorialAuthor] "Gaev Keeka and Luis Hernández"
SetVar [websiteAuthor] "https://visualneo.com"
... add any project start-up commands below
.First we need to create an empty array to store the data
CreateEmptyArray [mydata]
.Then we populate the array with data
.double click on any command to bring up the code wizard and better understand what's happening.
.id field has a unique value per row
Loop 0 9 [idnumber]
neoTableSetData [mydata] [idnumber] "id" [idnumber]
EndLoop
.first row
neoTableSetData [mydata] 0 "name" "John"
neoTableSetData [mydata] 0 "surname" "Travolta"
neoTableSetData [mydata] 0 "age" 64
.second row
neoTableSetData [mydata] 1 "name" "Tom"
neoTableSetData [mydata] 1 "surname" "Cruise"
neoTableSetData [mydata] 1 "age" 56
.third row
neoTableSetData [mydata] 2 "name" "Melanie"
neoTableSetData [mydata] 2 "surname" "Griffith"
neoTableSetData [mydata] 2 "age" 61
.fourth row
neoTableSetData [mydata] 3 "name" "Kate"
neoTableSetData [mydata] 3 "surname" "Winslet"
neoTableSetData [mydata] 3 "age" 43
.more rows...
neoTableSetData [mydata] 4 "name" "Meryl"
neoTableSetData [mydata] 4 "surname" "Streep"
neoTableSetData [mydata] 4 "age" 69
neoTableSetData [mydata] 5 "name" "Liam"
neoTableSetData [mydata] 5 "surname" "Neeson"
neoTableSetData [mydata] 5 "age" 66
neoTableSetData [mydata] 6 "name" "Angelina"
neoTableSetData [mydata] 6 "surname" "Jolie"
neoTableSetData [mydata] 6 "age" 43
neoTableSetData [mydata] 7 "name" "Susan"
neoTableSetData [mydata] 7 "surname" "Sarandon"
neoTableSetData [mydata] 7 "age" 72
neoTableSetData [mydata] 8 "name" "Little"
neoTableSetData [mydata] 8 "surname" "McJohn"
neoTableSetData [mydata] 8 "age" 9999
neoTableSetData [mydata] 9 "name" "Magic"
neoTableSetData [mydata] 9 "surname" "Johnson"
neoTableSetData [mydata] 9 "age" 59
... log this event
If [currentLoggedEventsObject] != ""
GetObjectHTML "[currentLoggedEventsObject]" [currentEventData]
SetVar [thisEventData] "[neoTableEvent]: "
If [neoTableEvent] == "click"
SetVar [thisEventData] "[thisEventData][neoTableField]"
StringifyJSON [neoTableRow] [neoTableRowString]
SetVar [thisEventData] "[thisEventData]<br/>[neoTableRowString]"
EndIf
If [neoTableEvent] == "pagechange"
SetVar [thisEventData] "[thisEventData][neoTablePage]"
EndIf
If [neoTableEvent] == "search"
SetVar [thisEventData] "[thisEventData][neoTableSearch]"
EndIf
SetObjectHTML "[currentLoggedEventsObject]" "[currentEventData]<br/>[thisEventData]"
EndIf
... log this event
If [currentLoggedEventsObject] != ""
GetObjectHTML "[currentLoggedEventsObject]" [currentEventData]
SetVar [thisEventData] "fmtSurname: [cellData]"
SetObjectHTML "[currentLoggedEventsObject]" "[currentEventData]<br/>[thisEventData]"
...StringifyJSON [neoTableRow] [neoTableRowString]
...SetObjectHTML "[currentLoggedEventsObject]" "[currentEventData]<br/>[thisEventData]<br/>[neoTableRowString]"
EndIf
... now format it (all UPPERCASE)
Return "<span style='text-transform: uppercase;'>[cellData]</span>"
[cellData]|STRING|value of the data to be formatted
... log this event
If [currentLoggedEventsObject] != ""
GetObjectHTML "[currentLoggedEventsObject]" [currentEventData]
SetVar [thisEventData] "fmtAge: [cellData]"
SetObjectHTML "[currentLoggedEventsObject]" "[currentEventData]<br/>[thisEventData]"
EndIf
... now format it
If [cellData] == 9999
Return "IS DEAD"
EndIf
If [cellData] > 60
Return "<span style='color:red;'>[cellData]</span>"
Else
Return "<span style='color:blue'>[cellData]</span>"
EndIf
[cellData]|STRING|value of data to be formatted
.this is
.SetVar [jo] "[jsonObj]"
.StringifyJSON [jo] [strJson]
.jsAlert "[strJson]"
.get value of "age" column in "[mydata]" at row with index "[idx]"
neoTableGetData [mydata] [idx] "age" [cAge]
.check [cAge] to color red or blue using its value
If [cAge] > 60
Return "<span style='color:red;'>[cellData]</span>"
Else
Return "<span style='color:blue'>[cellData]</span>"
EndIf
[cellData]|STRING|;[jsonObj]|VARREF|This is passed jsonObject by default;[idx]|INTEGER|This is the current row index
fadeIn
neoScrollBars "FrontCoverAbout" 8
0px
88px
506px
456px
0px
0px
1024px
88px
0
0px
544px
1024px
56px
0
520px
104px
488px
424px
This is the first Tutorial about the <strong>neoTable</strong> plugin.<br/><br/>
This plugin provides developers of <strong>VisualNEO Web Apps</strong> with a set of (easy to use) commands for interacting with the
<a href="https://bootstrap-table.com/" target="_blank">open source Bootstrap Table library</a><br/><br/>
With this plugin, you can <strong>present</strong> data to the App User in a <strong>Tabular</strong> (rows and column) or <strong>Card</strong>
(one column per record) format, and (optionally) enable her to <strong>search</strong>, <strong>sort</strong>, <strong>change</strong> and <strong>export</strong> this data.<br/><br/>
Developers can also avail themselves to commands that allow the data to be <strong>hidden</strong> from the user, and <strong>accessed</strong> and
<strong>revised</strong> outside of any actions taken by the user.<br/><br/>
This data can be a simple collection (i.e. an array of JSON objects) or records stored in a database on a remote server.<br/><br/>
In this first Tutorial, you will learn how to format and control/restrict the contents of a simple data collection presented to the user.<br/><br/>
A follow up Tutorial will demonstrate methods for adding, changing, removing and saving/retrieving collections of data, both by users and via script.<br/><br/>
Topics related to the deployment of this plugin to manage <i>records in databases on remote servers</i> will be covered in a separate future Tutorial.<br/><br/>
In subsequent pages of this Tutorial App you will learn (in a step by step process) how you can ...<br/><br/>
<ul>
<li>define <strong>columns</strong> within the Table</li>
<li><strong>load</strong> a simple collection of data and <strong>display</strong> it in rows and columns (like a spreadsheet)</li>
<br/>
<li>permit or restrict the user to <strong>search</strong>, <strong>sort</strong> and <strong>export</strong> the data</li>
<li>permit or restrict the user to view the rows of data in a <strong>Columnar</strong> and/or <strong>Card</strong> view</li>
<li>restrict the <strong>number of records</strong> made visible to the user at any one time</li>
<li>control the <strong>format</strong> of data displayed to the user</li>
<li><strong>be advised</strong> of actions taken by the user to search, sort and navigate through the collection</li>
<br/>
<li>retrieve data from the collection, for use in other parts of your Application</li>
<li>change the presentation (rows and columns) of data to the user, outside of any user actions</li>
<br/>
<li>have the plugin support selected languages other than English</li>
</ul>
Happy learning !!!
24px
208px
456px
272px
<h4><br><strong>Version:</strong> [tutorialVersion]</h4>
<h4><strong>Published:</strong> [tutorialPublicationDate]</h4>
<br><br>
<h5><strong>Authored By</strong>
<br>[tutorialAuthor]</h5>
<a href="[websiteAuthor]">[websiteAuthor]</a>
520px
552px
432px
40px
Click here to begin Tutorial
968px
552px
40px
40px
fill:#ffffff
svgArrowCircleRight
GotoNextPage
MasterPage1
fadeIn
... setup your page title here
SetVar [tutorialPageTitle] "Basic Table"
...
neoScrollBars "BasicTableAbout" "rounded-dots-dark"
0px
88px
506px
411px
The collection of data (i.e. an array of JSON objects) used in this Tutorial is created in-line; if you have <strong>VisualNEOWeb</strong> on your
computer, then open this Tutorial App and take a look at the code for the Project's <i>start-up</i> event, to
learn how this collection was created.<br/><br/>
<strong>neoTable</strong> is a powerful plugin with plenty of features and options; but it only takes a few commands to show a collection of data ...<br/><br/>
<ul>
<li><strong>neoTableSetColumn</strong> to define a column's characteristics (one command per column)
<li><strong>neoTableInitTable</strong> to define user permissions</li>
<li><strong>neoTableLoadData</strong> to specify the variable (containing the array of JSON objects)</li>
</ul>
Note that since your Web App can have multiple Tables displayed in multiple <strong>Containers</strong>, all <strong>neoTable</strong> commands identify the
name of the associated/referred container as their first parameter.<br/><br/>
Click on the button labelled <strong>Load Data</strong> to view the data in the Container on the right.<br/><br/>
It is a very basic example that deploys <i>default</i> values for most parameters.
The user has no permissions to manage the presentation of the data what so ever.<br/><br/>
If you have <strong>VisualNEOWeb</strong> on your computer, then you can take a look at the code for the <i>click</i> event of this Button.
Please take special note of the <i>order of invoking the commands</i> as it is important.<br/><br/>
<strong>Reminder</strong> - in order to better understand the parameters associated with any <strong>VisualNEOWeb</strong> command,
all you have to do is <em>double click on the command</em>; a Dialog Box will pop up showing a short description for each parameter (with a Text Entry Box to enter your choice of value for that parameter).<br/><br/>
Navigate to the next page in order to learn how to define user permissions for this Tabular data.
504px
88px
520px
456px
12px
504px
133px
35px
Load Data
... Reset any previous column definitions
neoTableResetColumns "BasicTableContainer"
... etup columns; IMPORTANT: column numbers MUST start at 1
neoTableSetColumn "BasicTableContainer" 1 "id" "Id" "" false false false ""
neoTableSetColumn "BasicTableContainer" 2 "name" "First Name" "" false false false ""
neoTableSetColumn "BasicTableContainer" 3 "surname" "Last Name" "" false false false ""
neoTableSetColumn "BasicTableContainer" 4 "age" "Age" "" false false false ""
... define user permissions
neoTableInitTable "BasicTableContainer" "" 0 "Table" false false false false false ""
... load Data
neoTableLoadData "BasicTableContainer" [mydata]
MasterPage1
fadeIn
... setup your page title here
SetVar [tutorialPageTitle] "Permissions"
...
neoScrollBars "PermissionsAbout" "rounded-dots-dark"
0px
88px
506px
411px
The previous example deployed <i>default</i> parameters to display a basic tabular display.<br/><br/>
In this example, the user is being permitted to ...<br/><br/>
<ul>
<li><strong>search/filter</strong> rows containing data matching a user specified value</li>
<li> toggle between <strong>Table</strong> and <strong>Card</strong> views</li>
<li><strong>hide/show</strong> columns</li>
<li><strong>export</strong> data (in JSON, XML, CSV, TXT, SQL and MS-Excel formats)</li>
<li><strong>sort</strong> rows based on the values within selected columns</li>
<li><strong>view</strong> only 5 rows of data (or 5 Cards) at a time</li>
</ul>
Click on the button labelled <strong>Load Data</strong> to have it presented in the Container on the right.<br/><br>
Then check out how easy it is for you to search (filter) rows of data with matching text; note that ...<br/><br/>
<ul>
<li>you can restrict the columns to be searched for matching values;<br/>
in this example, both <i>First Name</i> and <i>Last Name</i> columns are searchable</li>
<li>matching characters can be located anywhere within a cell e.g. try entering <b>john</b></li>
</ul>
In this example, the user is allowed to sort data based on the values in <i>Last Name</i> or <i>Age</i> columns;
notice how the Titles of these columns have tiny arrow heads that allow rows to be sorted in ascending or descending order.<br/><br/>
If you have <strong>VisualNEOWeb</strong> on your computer, then take a look at the code for the <i>click</i> event of this Button.
504px
88px
520px
456px
12px
504px
133px
35px
Load Data
... Reset any previous column definitions
neoTableResetColumns "PermissionsContainer"
... etup columns; IMPORTANT: column numbers MUST start at 1
neoTableSetColumn "PermissionsContainer" 1 "id" "Id" "" false false false ""
neoTableSetColumn "PermissionsContainer" 2 "name" "First Name" "" false false true ""
... make surname and age sortable
neoTableSetColumn "PermissionsContainer" 3 "surname" "Last Name" "" true false true ""
neoTableSetColumn "PermissionsContainer" 4 "age" "Age" "" true false true ""
... define user permissions
neoTableInitTable "PermissionsContainer" "" 5 "Table" true true true true false ""
... load Data
neoTableLoadData "PermissionsContainer" [mydata]
MasterPage1
fadeIn
... setup your page title here
SetVar [tutorialPageTitle] "Subroutines"
...
neoScrollBars "SubroutinesAbout" "rounded-dots-dark"
SetVar "[currentLoggedEventsObject]" "SubroutinesLoggedEventsInfo"
0px
88px
506px
411px
You, as the developer, can specify subroutines that are to be called every time specific events related to the Table occur.<br/><br/>
Within the <strong>neoTableSetColumn</strong> command you specify the name of the subroutine that will be called whenever a cell in that column is loaded/changed;
here, you have an opportunity to format the content shown to the user.
In this example, subroutines have been specified for ...<br/><br/>
<ul>
<li><i>Last Name</i> - fmtSurname always returns the data value in UPPERCASE</li>
<li><i>Age</i> - fmtAge returns the number in blue (60 or less), red (61 to 998) or the phrase 'IS DEAD' (999)</li>
</ul>
Within the <strong>neoTableInitTable</strong> command, you specify the subroutine that should be called whenever one of the following events occurs ...<br/><br/>
<ul>
<li>user navigates to another page within the Table</li>
<li>user searches for matching rows</li>
<li>user clicks on on a row</li>
<li>user checks/unchecks a row (covered in the follow up tutorial)</li>
<li>successful loading of the data from an external source (not covered here)</li>
<li>error encountered when loading the data from an external source (not covered here)</li>
</ul>
The specified subroutine can examine several <i>reserved variables</i> to determine the event that triggered the call as well as any associated information.<br/><br/>
In this example, the subroutines (eventManager, fmtSurname and fmtAge) log the <i>event type</i> and associated information;
you can then examine this log by clicking on the button labelled <strong>Show Log</strong><br/><br/>
So, go ahead and load the data, navigate to another page, do a search and click on a row; then examine the logged information.<br/><br/>
Don't forget to examine the commands in the subroutines that are being called.<br/><br/>
504px
88px
520px
456px
12px
504px
133px
35px
Load Data
... Reset any previous column definitions
neoTableResetColumns "SubroutinesContainer"
... setup columns; IMPORTANT: column numbers MUST start at 1
neoTableSetColumn "SubroutinesContainer" 1 "id" "Id" "" false false false ""
neoTableSetColumn "SubroutinesContainer" 2 "name" "First Name" "" false false true ""
... make surname and age sortable
neoTableSetColumn "SubroutinesContainer" 3 "surname" "Last Name" "" true false true "fmtSurname"
neoTableSetColumn "SubroutinesContainer" 4 "age" "Age" "" true false false "fmtAge"
... define user permissions
neoTableInitTable "SubroutinesContainer" "" 5 "Table" true true true true false "eventManager"
... load Data
neoTableLoadData "SubroutinesContainer" [mydata]
154px
505px
133px
35px
Show Log
...
MoveObject "SubroutinesLoggedEvents" "10px" "100px"
ShowObject "SubroutinesLoggedEvents" "none" 0
12px
609px
468px
344px
False
<h4>Event Log - click to hide</h4>
HideObject "SubroutinesLoggedEvents" "fadeOut" 1
12px
47px
442px
280px
HideObject "SubroutinesLoggedEvents" "fadeOut" 1
293px
504px
133px
35px
Clear Log
SetObjectHTML "SubroutinesLoggedEventsInfo" ""
MasterPage1
fadeIn
... setup your page title here
SetVar [tutorialPageTitle] "Controlled Views"
...
neoScrollBars "ViewsAbout" "rounded-dots-dark"
SetVar "[currentLoggedEventsObject]" "ViewsLoggedEventsInfo"
0px
88px
506px
320px
So far in this Tutorial, the focus has been on allowing the user to search for matching rows, toggle views,
show/hide columns, export data, sort data and navigate pages, while reacting to user actions via subroutine code.<br/><br/>
However, there are a number of commands available to the developer to change the presentation of data independant of user activity.
On this page, you can observe some of these commands in action.<br/><br/>
Click on the button labelled <strong>Load Data</strong>. Notice that in this example ...<br/><br/>
<ul>
<li>the columns appear in a different order than that present in the data collection</li>
<li>the width of the <strong>Id</strong> column is set to 22px</li>
<li>the width of the <strong>First Name</strong> column is set to 15%</li>
</ul>
Column positions are controlled via the <i>Column number</i> parameter of the <strong>neoTableSetColumn</strong> command,
and column widths via the <i>Column width</i> parameter.<br/><br/>
Note that (for brevity) the buttons below are scripted with values that are hard coded at desgn time;
in your Web Apps, the parameters could specify <i>variables</i>, that would be populated from a variety of hard/soft sources.<br/<br/>
504px
88px
520px
456px
8px
418px
86px
28px
Load Data
... Reset any previous column definitions
neoTableResetColumns "ViewsContainer"
... setup columns; IMPORTANT: column numbers MUST start at 1
neoTableSetColumn "ViewsContainer" 1 "name" "First Name" "15%" false false true "fmtFirstName"
neoTableSetColumn "ViewsContainer" 2 "surname" "Last Name" "" false false true "fmtSurname"
neoTableSetColumn "ViewsContainer" 3 "age" "Age" "" false false false "fmtAge"
neoTableSetColumn "ViewsContainer" 4 "id" "Id" "22px" false false false ""
... define user permissions
neoTableInitTable "ViewsContainer" "" 5 "Table" true true true true false "eventManager"
... load Data
neoTableLoadData "ViewsContainer" [mydata]
188px
419px
84px
28px
Show Log
...
MoveObject "ViewsLoggedEvents" "10px" "100px"
ShowObject "ViewsLoggedEvents" "none" 0
270px
419px
78px
28px
Clear Log
SetObjectHTML "ViewsLoggedEventsInfo" ""
12px
609px
468px
314px
False
<h4>Event Log - click to hide</h4>
HideObject "ViewsLoggedEvents" "fadeOut" 1
12px
47px
442px
250px
HideObject "ViewsLoggedEvents" "fadeOut" 1
8px
447px
80px
28px
Next Page
neoTableGotoNextPage "ViewsContainer"
88px
447px
98px
28px
Previous Page
neoTableGotoPrevPage "ViewsContainer"
187px
447px
66px
28px
Page 2
neoTableGotoPage "ViewsContainer" 2
254px
447px
70px
28px
Page 99
neoTableGotoPage "ViewsContainer" 99
10px
478px
117px
28px
Hide Age Column
neoTableHideColumn "ViewsContainer" "age"
128px
478px
113px
28px
Hide All Columns
neoTableHideAllColumns "ViewsContainer"
244px
478px
110px
28px
Show Id Column
neoTableShowColumn "ViewsContainer" "id"
356px
478px
116px
28px
Show All Columns
neoTableShowAllColumns "ViewsContainer"
10px
508px
73px
28px
Age=43
CreateEmptyObject [filterObject]
SetVar [filterObject('age')] 43
neoTableFilter "ViewsContainer" [filterObject]
84px
508px
155px
28px
Age=43;LasName=Jolie
CreateEmptyObject [filterObject]
SetVar [filterObject('age')] 43
SetVar [filterObject('surname')] "Jolie"
neoTableFilter "ViewsContainer" [filterObject]
408px
509px
81px
28px
No Filter
... empty filterObject will show all rows
CreateEmptyObject [filterObject]
neoTableFilter "ViewsContainer" [filterObject]
96px
419px
88px
28px
Toggle View
neoTableToggleView "ViewsContainer"
240px
508px
164px
28px
Age = 43 or 61 or 66
... create array of ages
CreateEmptyArray [ageArray]
ArrayAddItem [AgeArray] 43
ArrayAddItem [AgeArray] 61
ArrayAddItem [AgeArray] 66
...
CreateEmptyObject [filterObject]
SetVar [filterObject('age')] [ageArray]
neoTableFilter "ViewsContainer" [filterObject]
MasterPage1
fadeIn
... setup your page title here
SetVar [tutorialPageTitle] "Miscellaneous"
...
neoScrollBars "MiscAbout" "rounded-dots-dark"
... no event logging
SetVar "[currentLoggedEventsObject]" ""
... preload the Table in English
... Reset any previous column definitions
neoTableResetColumns "MiscContainer"
... setup columns; IMPORTANT: column numbers MUST start at 1
neoTableSetColumn "MiscContainer" 1 "name" "First Name" "15%" false false true ""
neoTableSetColumn "MiscContainer" 2 "surname" "Last name" "" true false true "fmtSurname"
neoTableSetColumn "MiscContainer" 3 "age" "Age" "" false false false "fmtAge"
neoTableSetColumn "MiscContainer" 4 "id" "Id" "22px" false false false ""
... define user permissions
neoTableInitTable "MiscContainer" "" 5 "Table" true true true true false "eventManager"
... load Data
neoTableLoadData "MiscContainer" [mydata]
0px
88px
506px
322px
<h1>Miscellaneous Topics</h1>
<h3>Data Enquiries</h3>
Other parts of your application can access any part of the collection of data (even when it is not made visible to the user).
You can access the value of a specified element (a field within a specified row) using the <strong>neoTableGetData</strong> command.<br/><br/>
Click the Buttons labelled <strong>Row 8 - age</strong> and <strong>Row 4 - surname</strong> to see the corresponding values in the collection.<br/><br/>
Since we are accessing data items in the collection ...<br/><br/>
<ul>
<li>you refer to the field names (NOT the column headings)</li>
<li>row numbers start at 0 (NOT 1)</li>
<li>raw values (NOT the formatted text that the user sees) are returned i.e. 999 (NOT the phrase 'IS DEAD') and Streep (NOT 'STREEP').</li>
</ul>
<h3>Multilingual</h3>
Yes, <strong>neoTable</strong> can be assimilated in web applications built for users who speak languages other than English.<br/><br/>
You specify this as the <i>Language</i> parameter within the <strong>neoTableInitTable</strong> command.
Currently, the plugin can handle English, Spanish, French, German, Russian and Italian languages.<br/><br/>
Note that you will still be responsible for specifying the column headings (<i>ColumnHeaderText</i> within the <strong>neoTableSetColumn</strong>)
in your chosen language, for each column in your Table.<br/><br/>
Click the Buttons labelled <strong>Spanish</strong> and <strong>French</strong> to see how it works.<br/><br/>
<h3>What is Next</h3>
This tutorial (Part 1) has covered a lot of ground; but we have only scratched the surface as far as the capabilities of of the plugin are concerned.
In this part, we focused on accessing a static collection of data.<br/><br/>
Part 2 of this Tutorial will show you how the items within the collection can be modified, both by the user and via script.
Also, alternate methods for creating collections of data, and for saving changes (to local storage and local files)
between runs of the Web App will be exhibited.<br/><br/>
<strong>neoTable</strong> can also be used as a front-end (client side) for managing records in a database residing on a remote server;
this will be covered in another (separate) tutorial.
504px
88px
520px
456px
7px
420px
97px
28px
Row 8 - age
SetVar [thisRow] 8
SetVar [thisField] "age"
neoTableGetData [mydata] [thisRow] "[thisField]" [thisResult]
AlertBox "Result ..." "Row=[thisRow]<br/>Field=[thisField]<br/>Value=[thisResult]" ""
107px
421px
116px
28px
Row 4 -surname
SetVar [thisRow] 4
SetVar [thisField] "surname"
neoTableGetData [mydata] [thisRow] "[thisField]" [thisResult]
AlertBox "Result ..." "Row=[thisRow]<br/>Field=[thisField]<br/>Value=[thisResult]" ""
228px
421px
86px
28px
Spanish
... Reset any previous column definitions
neoTableResetColumns "MiscContainer"
... setup columns; IMPORTANT: column numbers MUST start at 1
neoTableSetColumn "MiscContainer" 1 "name" "Nombre" "15%" false false true ""
neoTableSetColumn "MiscContainer" 2 "surname" "Apellido" "" true false true "fmtSurname"
neoTableSetColumn "MiscContainer" 3 "age" "Años" "" false false false "fmtAge"
neoTableSetColumn "MiscContainer" 4 "id" "Id" "22px" false false false ""
... define user permissions
neoTableInitTable "MiscContainer" "es-ES" 5 "Table" true true true true false "eventManager"
... load Data
neoTableLoadData "MiscContainer" [mydata]
315px
421px
86px
28px
French
... Reset any previous column definitions
neoTableResetColumns "MiscContainer"
... setup columns; IMPORTANT: column numbers MUST start at 1
neoTableSetColumn "MiscContainer" 1 "name" "Prénom" "15%" false false true ""
neoTableSetColumn "MiscContainer" 2 "surname" "Nom de famille" "" true false true "fmtSurname"
neoTableSetColumn "MiscContainer" 3 "age" "Âge" "" false false false "fmtAge"
neoTableSetColumn "MiscContainer" 4 "id" "Id" "22px" false false false ""
... define user permissions
neoTableInitTable "MiscContainer" "fr-FR" 5 "Table" true true true true false "eventManager"
... load Data
neoTableLoadData "MiscContainer" [mydata]
fadeIn
259px
80px
509px
472px
0px
544px
1024px
56px
0
0px
0px
1024px
88px
0
304px
120px
416px
352px
<h3 style="padding:15px 0px 15px 0px;border-top:2px solid #ed792f;border-bottom:2px solid #ed792f;"><strong style="color:#403f3c;">Thank you for viewing this Tutorial</strong></h3><br>
If you are viewing this Tutorial online and want to know how this Web App was built,
you can view it with <strong>VisualNEO Web</strong><br><br>
You can download a free trial version<br>of <strong>VisualNEO Web</strong> from <a href="[downloadPage]" target="_blank">here</a><br><br>
You can view more Tutorials about <strong>VisualNEO Web's</strong><br>
Rapid Application Development platform <a href="[tutorialsPage]" target="_blank">here</a>.
16px
552px
40px
40px
fill:#ffffff
svgArrowCircleLeft
GotoPrevPage
0px
0px
1024px
88px
0
0px
8px
496px
72px
<strong style="color:#403f3c">Tutorial</strong><br>[tutorialComponent]
h2
496px
8px
528px
72px
[tutorialPageTitle]
h2
0px
544px
1024px
56px
0
968px
552px
40px
40px
fill:#ffffff
svgArrowCircleRight
GotoNextPage
16px
552px
40px
40px
fill:#ffffff
svgArrowCircleLeft
GotoPrevPage
0px
0px
1024px
600px
False
custom