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.

SPLIT GROUPBOX

 

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:

 

ADD ROWS

 

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 COLUMNS

 

Split a column as we did with groupboxes.

Hover on the middle and click on the two sided arrow.

 

Split left bottom column, too.

 

ADD ELEMENTS

 

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:

 

SET VALIDATION

 

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.

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

 

ADD COMPANIES

 

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

 

CHANGE APPEARANCE

 

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.

 

STYLE GROUPBOXES

 

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.

 

RENAME TOOLBAR

 

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.

INTRO BLOCKS

 

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.

 

SELECT VARIABLES

 

Open Lookup panel or just type “item”.

Select variables item.Name, item.Full name, item.Surname.

For now, drag them across the grey line.

SET VARIABLES

 

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!