INTRO TO THE ENVIRONMENT

You will learn how to create and use Word templates, work with tables in App Builder and much more!

The result will be a working CV generator application:

CREATE WEB PAGE

From the Web pages section, click on the Add page button.

Name new web page CV maker.

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

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

Add the next fields (Name - type):
Phone - Phone

Email - Email

Photo - Upload file - Image

Save web page

Note: we won’t remind you to save your pages anymore to make a tutorial shorter.

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 because we use them as margins for the main content.

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 its Properties panel.

Mark Show header true.

Set the Title Personal information.

In Appearance set Show as Thin-line.

Set Style to None.

CREATE AND STYLE GROUPBOXES

It is possible to add new Groupboxes from Components ⇒ LAYOUT.

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

Add three Groupboxes.

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

Hint: you can create one with proper styles and copy-paste it.

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

Note: all groupbox titles are in an uppercase form.

ADD MULTILINE TEXT

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

Give it the name Tell more about yourself.

Click on the field to open its Properties. In APPEARANCE set Size to 7. That is the height (in text lines) of the component.

CREATE EMBEDDED COLLECTION

Collection is a set of instances.

Visually, a collection can be displayed as  a table or as a multiselect or as a card grid.

Click on the Define -> Collection field drag and drop it on the work zone.

In our case, we need to add an Embedded data type . Embedded type is treated as an integral part of its enclosing type and its collection can be edited on the same page, without having to open a new tab or modal window.

Name the data type Work experience and click Create.

STYLE COLLECTION

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

Get rid of naming duplicates.

Drag the content of the imported Work experience outside.

Then delete the remaining inner Work experience groupbox.

You should get the result:

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.

Note: in a few steps we will show how to swap/delete/add columns to a table.

CREATE EMBEDDED DATA TYPE

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

In Menu, Advanced, Data types add embedded data type.

Name it Education.

You were redirected to the Data types page. You can see related Views, Fields, Actions there.

Create Table view.

The correct name is automatically generated. But you can use your own if you need one.

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, save the web page and then go back to the CV maker Web Page View.

To go to the CV maker page, you can use the Navigate button at the top left corner of the Navigation panel.

Alternatively, from Advanced Menu, Data types, select CV maker and go to the web page view.

IMPORT EDUCATION DATA TYPE

To add the imported Education data type into the collection.

Select the data type you need. In our case, it is Education. The Name field will become Education by default. Click Create.

Drag the table from Education type outside and delete inner groupbox Education that was left empty.

You should have a page like this now. Page design is completed.

ADD BUTTON TO THE TOOLBOX

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

Click on the Toolbar to start editing it. Near the Save web page button create some extra space.

From Components ⇒ LAYOUT, drag and drop the button.

Set the Title to Download CV.

SET ACTION

In button Properties ⇒ ACTIONS ⇒ Server action select Download Word doc.

The Download Word doc is a built-in server action and it will automatically generate and download the word file from the template you provide.

We will add a template in a few steps.

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 the Page Properties select Load in edit mode.

Usually, you first open an instance, then click the Update button.

But it is more convenient to load the page in an edit mode by default (in our case).

MS WORD TEMPLATE

The last thing we need to do is to use the word template here.

Download and open word template.  

Its structure may seem familiar. The alignment is performed using the word tables (they are hidden in our 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 an MS WORD  view.

Upload the word file into the system.

You can change the template anytime you need.

EDIT SYSTEM NAMES

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

Click on the columns 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.

Full name - name

Address  - address

Email - email

Phone - phone

Photo - photo

Tell about yourself - other info

Work experience - experience

Education - education

EDIT SYSTEM NAMES

Assign SYSTEM NAMES for nested elements.

Go to the  Work Experience data type and set system names as follows:

Company - company

Position - position

Start date - start_date

End date - end_date

Description - description

Education must have the following:

Institution name - institution

Degree - degree

Start date - start_date

End date - end_date

Other info - description

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!