Documentation

Trace:

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
Last revision Both sides next revision
visionx:modern_web_application [2020/06/08 10:52]
cduncan [The finished application]
visionx:modern_web_application [2021/11/18 11:29]
admin
Line 1: Line 1:
 ~~NOTRANS~~ ~~NOTRANS~~
 +{{SIDETOC}}
 ~~Title: Modern web application~~ ~~Title: Modern web application~~
 Version: 5.1.2 / 2019-12-09 Version: 5.1.2 / 2019-12-09
Line 26: Line 26:
 {{:​visionx:​modern_web_application:​add-morphpanel.png?​nolink|Adding an Editing Panel}} {{:​visionx:​modern_web_application:​add-morphpanel.png?​nolink|Adding an Editing Panel}}
  
-For our next step, we need a table to store our customer data in. For this purpose, click the green plus in the bottom of your VisionX designer under the label "NEW Table" (1). For this tutorial, let's assume we already have a customer table available in our database. If you don't have an existing customer table, simply create a new screen with demo customers from [[https://​doc.sibvisions.com/​_media/​visionx/​modern_web_application/​customers.csv|this]] spreadsheet. In the "Datasource Wizard", we, therefore, select the "Use existing data from database tables"​ option (2). Press next (3) to continue.+For our next step, we need a table to store our customer data in. For this purpose, click the green plus in the bottom of your VisionX designer under the label "NEW Table" (1). For this tutorial, let's assume we already have a customer table available in our database. If you don't have an existing customer table, simply create a new screen with demo customers from [[https://​doc.sibvisions.com/​_media/​visionx/​modern_web_application/​customers.csv|this]] spreadsheet. In the Datasource Wizard, we, therefore, select the "Use existing data from database tables"​ option (2). Press next (3) to continue.
  
 {{:​visionx:​modern_web_application:​create-table-step1.png?​nolink|Creating a table from an existing table}} {{:​visionx:​modern_web_application:​create-table-step1.png?​nolink|Creating a table from an existing table}}
Line 38: Line 38:
 {{:​visionx:​modern_web_application:​create-table-step3.png?​nolink|Select the database table}} {{:​visionx:​modern_web_application:​create-table-step3.png?​nolink|Select the database table}}
  
-Having created the table, we can now start with the layout of our screen. In this step, we add the table (1) to our panel. Furthermore,​ we are adding ​a search bar (2) and an insert button from the "Web Elements"​ (3) to create a new customer.+Having created the table, we can now start with the layout of our screen. In this step, we add the table (1) to our panel. Furthermore,​ we add a search bar (2) and an insert button from the "Web Elements"​ (3) to create a new customer.
  
 {{:​visionx:​modern_web_application:​create-table-layout.png?​nolink|Layouting our table}} {{:​visionx:​modern_web_application:​create-table-layout.png?​nolink|Layouting our table}}
Line 46: Line 46:
 {{:​visionx:​modern_web_application:​create-table-layout-designer.png?​nolink|The finished layout}} {{:​visionx:​modern_web_application:​create-table-layout-designer.png?​nolink|The finished layout}}
  
-With this being done, we can now look what our application looks like via the VisionX Live Preview:+With this being done, we can now see what our application looks like via the VisionX Live Preview:
  
 {{:​visionx:​modern_web_application:​create-table-layout-done.png?​nolink|The finished layout}} {{:​visionx:​modern_web_application:​create-table-layout-done.png?​nolink|The finished layout}}
Line 56: Line 56:
 {{:​visionx:​modern_web_application:​create-form-layout.png?​nolink|Starting on our form layout}} {{:​visionx:​modern_web_application:​create-form-layout.png?​nolink|Starting on our form layout}}
  
-Once again, this is how it should look in the designer ​now:+Once again, this is how it should look in the designer:
  
 {{:​visionx:​modern_web_application:​create-form-layout-designer.png?​nolink|The finished layout}} {{:​visionx:​modern_web_application:​create-form-layout-designer.png?​nolink|The finished layout}}
  
-After having set everything in place, this is how our form is looking ​in the Live Preview:+After having set everything in place, this is how our form looks in the Live Preview:
  
 {{:​visionx:​modern_web_application:​create-form-layout-done.png?​nolink|Starting on our form layout}} {{:​visionx:​modern_web_application:​create-form-layout-done.png?​nolink|Starting on our form layout}}
This website uses cookies for visitor traffic analysis. By using the website, you agree with storing the cookies on your computer.More information