CV Maker

INTRO TO THE ENVIRONMENT

This is an Intermediate Codejig Tutorial. After the completion of a tutorial you will be able to create a working CV generator application!

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.

ADD ROW

First of all, we need to create a grid where our fields will be stored.

Add a new row with three columns.

Delete an unnecessary column.

ADD TEXT FIELDS

From the Components -> ADD NEW FIELD Drag and drop into the first column Text input component. It is used to get single-line data from users.

Name it Full name.

Add multiline text field, Address.

ADD MORE FIELDS

Drag and drop Phone and Email fields. Give them names Phone and Email respectively.

From Upload file drag and drop Image. Name it Photo.

ALIGN GROUPBOX

Now it’s time to rearrange elements a little bit to get a perfect result.

Split the main Groupbox.

Split it again and you will get three groupboxes. Drag the row with the fields into the second Group Box in the middle.

Adjust the width of the Grouboxes to get the document-like page.

STYLE GROUPBOX

First of all, hide the side grouboxes as we need them only as padding. Click on the groubox, in Properties -> General mark the checkbox Hidden.

We can show that the main Groupbox contains some personal information by adding a title. Click on the free area (usually at the top) of the Groupbox to open it’s Properties panel.

Mark Show header true.

Set the Title Personal information.

In Appearance set Show as Classic.

Set Style to Primary.

ADD GROUPBOX

It is possible to add new Groupboxes from Components -> LAYOUT.

Drag one more and drop it below the Personal information Groupbox.

CREATE AND STYLE GROUPBOXES

Add three Groupboxes.

Set styles as above (Show as Classic and Style - None).

Give the proper names to sections: Work experience, Education and Other information.

ADD MULTILINE TEXT

From Components -> ADD NEW FIELD -> Text input drag and drop multiline text.

Give it the name Tell more about yourself.

Inside field properties, in APPEARANCE set Size to 7. That is the height (in lines) of the component.

CREATE EMBEDDED COLLECTION

Collection is the set of instances.

For instance, a table that contains different elements is a collection.

Click on the plus near EXISTING FIELDS and select collection.

In our case, we want to add an Embedded data type, which allows us to fill in the table on the same page.

Name the data type Work experience and click Create.

STYLE COLLECTION

 

In Web page view the collection is almost the same as other elements.

After you created the Work experience, you can drag and drop it into the Work Experience Groupbox.

Get rid of naming duplicates.

Go to the data type’s properties. Unmark the Show header in General. In APPEARANCE set Show as Classic and Style None.

ADD ELEMENTS TO COLLECTION

Every element you drag into the table is added to the collection. The regular field is a kind of column in the collection.

For now drag and drop the elements in the following order: Company, Position, Start date, End date, Job description.

CREATE EMBEDDED DATA TYPE

There is another way, more practical, to create and manage data types.

In Data types add embedded data type Education.

Create Table view.

ADD VALUES

The Table view is how the elements are shown in the collection or table.

You can add and rearrange columns here.

Drop the corresponding fields with the names as follows: Institution name, Degree, Start date, End date, Other info.

Rearrange them as you want.

Try to get the following result, and then go back to the CV maker Web Page View.

IMPORT EDUCATION DATA TYPE

To import the created Education data type add the collection.

Select the data type you need. In our case it is Education.

Drag and drop the Education from EXISTING FIELDS into the Working area.

Hide the header and also set proper styles.

 

ADD BUTTON TO THE TOOLBOX

The most important part is to add a button that will generate a .docx file.  

Click on the Toolbar to edit it. Give some extra space.

From Components -> LAYOUT drag and drop the button.

Set the Title to Download Word.

SET ACTION

In button Properties -> ACTIONS -> Server action select Download Word doc.

The predefined server function will automatically generate the view from the template you will provide later.

CHANGE PAGE PROPERTIES

You can add extra features in the Page settings panel. To open it, click on the “more” button on the right side of the screen.

In Page Properties select Load in edit mode.

MS WORD TEMPLATE

Download and open word template.  

The structure may seem familiar. The alignment is performed using the tables (hidden in template).

The markdown is very simple. Elements for rendering are written inside { } brackets (for ex, {f_name} ).

Using the point accessor we can get the nested elements.

{company.position}

You can read about writing Codejig templates here.

CREATE MS WORD VIEW

To upload the template in the CV maker data type create MS WORD  view.

Upload the word file into the system.

You will be able to change it anytime you need.

EDIT SYSTEM NAMES

The last thing but not least is to assign System names that are readable unlike the default ID.

Click on the fields button and mark SYSTEM NAME to show the column with System names.

Assign the proper system names as shown below.

Any mistakes will result in the word template not generating an element for which the SYSTEM NAME and Word name won’t match.

EDIT SYSTEM NAMES

Assign SYSTEM NAMES for nested elements.

For the Work Experience data type they must be as follows:

Education must have the follows:

After you have successfully set SYSTEM NAMES you will have no problems with word generation.  

TEST YOUR APP

If you have successfully achieved the desired results, it is time to publish and share your application!