List of Customers
INTRO TO THE ENVIRONMENT
This is another good starter app to try some features of Codejig App Builder. In this tutorial, we'll build an app that can easily save your customers’ data.
Before we start with a walkthrough, let’s take a short look at the home page of App Builder IDE (integrated development environment). Click on the image below to enlarge it.
INTRO TO THE WEB PAGE EDITOR
Before creating your first web page in Codejig App Builder, take a look at the elements of the Web page editor.
The key to a good design is the correct arrangement of elements. Let’s do it in our Web Page Editor.
Hover near the middle top of a blue groupbox and click on a two sided arrow. As a result, we get two groupboxes.
In case you did something wrong, you can always undo your actions by clicking on the return arrow on the top right of the screen:
One row isn’t enough for a good App.
Move the cursor to the middle bottom of a groupbox. A round plus should appear. Click on it. Add rows.
And the result should be as follows:
Split a column as we did with groupboxes.
Hover on the middle and click on the two sided arrow.
Split left bottom column, too.
From the Components panel ->
ADD NEW FIELD drag and drop
Text input element.
Set the Name value to Name. It will be the Input for Names of our Customers.
Add one more Text input field and call it Surname.
The current view should be as follows:
It is required for a Customer to have a Name and Surname.
Click on Name element to open it’s Properties. In the VALIDATION mark Required checkbox.
Repeat the steps for Surname field.
From Components -> ADD NEW FIELD drag and drop Text input element.
Name it Full Name.
Click on element Full name to open it’s Properties panel.
In General properties mark the Disabled checkbox. That means, users can no longer edit Full name field.
In ADVANCED set Read only mode view to Disabled Input.
You can split Full name field column if you want to get a better design.
ADD PHONE AND EMAIL
From Components -> ADD NEW FIELD drag and drop Phone number field. Name it Phone.
Drag and drop Email field, too. Name it Email.
That would be the user’s data.
The result should be as below:
ADD COMPANY AND NOTES
We can have users from a limited list of companies.
To add a selectable field from Components -> ADD NEW FIELD drag and drop Select. Give it the name Company.
Drag and drop Text Input. Name it Notes. In that section we can store some company’s information.
To add predefined companies, click on plus near the Company field.
Enter the name of a company, for example, “ABC Software”. Save and close.
Add a few more predefined companies, for example, “Impoexp llc” and “Web Media Ltd”.
Click on Notes Text field to open the Properties panel.
In APPEARANCE Mark Multiline checkbox.
Set Size to 7. Your text field will now have a size of 7 text rows.
Click on the unoccupied area of the first group box to open it’s Properties panel.
In GENERAL mark Show header.
Set Title to Contact person.
Repeat steps for the second group box.
Set it’s title to Organization.
CHANGE GROUPBOX APPEARANCE
In groupbox Properties -> APPEARANCE set Show as -> solid.
Make the solid appearance for both groupboxes Contact person and Organization.
Click on the Toolbar to start editing it.
Click on List of customers and in it’s Properties set Title to Customer.
ADD ON FIELD CHANGED
Click on Surname field. In
Properties -> ACTIONS click on the
On field changed.
A new client function will be created.
After you saved your Web Page View, you were redirected to the Code Blocks Editor.
You can drag and drop blocks into a Working area from the Blocks panel on the left.
Open Lookup panel or just type “item”.
Select variables item.Name, item.Full name, item.Surname.
For now, drag them across the grey line.
Right click on item.FullName. The menu will appear.
Select “Set variable”.
Drag and drop the newly created green puzzle into the function.
ADD CREATE TEXT WITH
From BLOCKS -> TEXT Drag and drop create text with block.
Pass parameters item.Name and item.Surname to the create text with block.
After that, Full name needs a separator between words.
Click on the gear icon near the block.
Drag and drop one more slot.
ADD STRING BLOCK
Add a new text block and enter there one space.
COPY YOUR CODE
Select the most left block (that is item.Full name) and press Ctrl + C to copy the code.
Finally, save your code blocks:
PASTE YOUR CODE
Switch back to the Web page view by clicking on it’s name in the Navigation bar.
And then in the Data Types Panel open the Web Page view.
Click on the Name field. In Properties -> ACTIONS Create one more On field changed event.
You can paste the code by pressing
Ctrl + V. Drag and drop the newly appeared code blocks onto the onChanged function.
TEST YOUR APP!
You have successfully built the web page to save the data of general customers.
Publish your application by clicking on the Publish button on the Header bar.
Wait for some seconds. After your app is published, open it by clicking the Open button on the Header bar. Test out your first Codejig App!