Working with Word Templates

Step 1: Create an App

  1. Create a new App - You can start with a blank app. 

  2. Enter the name of your App. It can be everything you want, for example: “Task Manager Step by Step” (You can always change it later).

  3. As you have created an App, you’ll see a pop-up window. Click “Develop”.

  4. All right, here we are. Let’s create a simple “Task” page. Here we can add and manage our tasks. 

  5. Ok, try to add some layouts. On the left side you can see “LAYOUT”. Open it, and drag and drop  “Group Box” where you need.

  6. Let’s create some placeholders for our task window. We want to:

    1. Enter the Task name

    2. Enter the name of a person, responsible for the task. 

    3. Give the description of a task

    4. Be able to add some details, as well as Phone number, maybe link to the task or email. 

    5. Also we want to see a publish data and Active button, that will indicate if our app is active or not


Here is our panel where we will take all needed elements.

Now, let’s create a web-page template, with just dragging and dropping elements you need. We can add new fields, like text input or multiline text input. And, of course fields like Phone number, Email, Link and others. We need a place to import/export some files for our task, too.

Also we need an active field, checkbox, that will show us whether a task is completed or not.

And, of course, we want to be able to set the priority. Suppose, we classify our tasks as Urgent, Normal, Low priority. You see, we need to choose only between these words, so Selection type would be perfect here. As we locate it, we need to add a choice. Simply click plus and enter your desired word.

Save it and open in Preview mode. You see, that we have some buttons, text fields, phone Number, Email and Link Fields. If you have some problems with creating these items, you can easily watch our tutorials video https://www.youtube.com/channel/UCi_Ga9qKzngwRsMO-srbxNg/videos



Ok, here is the template to add and manage our tasks

To use all of it we first need to Build and deploy our app. Notice that we will be able to make changes later. But for now, Build and Deploy. So, if you hover on the Publish button on the top, you can see “Switch to Build/Deploy mode”. Just click on that link. "Switch to Build/Deploy mode"

 

The steps are very simple. “Build” - then wait a bit for the project to compile, then click “Deploy” and choose your app. Again, wait a bit and then you can open and test your app!


Here we are. But it seems that items are in the wrong order, for example, we don’t need the “Publish” button here. So, what we need is to remove it, and then reorder items in our table. 


To open the data type page just go to the “Web pages”, choose your page, here it is “Task”, and you’ll see the “view data type” link. You can watch this video to get more understanding about Data Types’ page. 

To delete an item, just click on three dots on the right and then click “Delete”.

o reorder items, simply choose “Reorder” on the top right corner and then drag and drop as you need. Let’s sort them as:

Task - Responsible - Task Priority - Description - Details - State - Link - Email - Phone - Active - Document - Date.

Then we need to build and deploy our Task Manager App again. 



Step 2: Create and Fill Word Template

We have already built an App to manage our Taks. But what if we need to download a concrete task in, for example, .docx format? Generally, we offer two ways to build templates: easy and, say, Pro version. First, let’s take a step-by-step look at how to create your own template and download a Word Document using it. 


First of all, to use some data from our App, we need to assign System variables. To do this, we need to go to the “View data type” section in our app page. Then in the “Fields” panel click this box and make sure that tick near System Name is active. You’ll see that now we have a new type here, and it’s System name, System variables. Notice, there is a specific  syntax with naming. For example, we can’t use special symbols like space or quotes. Usually we use _ symbol instead of spaces. We will use System names later in our Word template to name our variables properly.


Again, click three dots on the right and then click on Edit system name. Make sure that you write unique values for each data field. 



en just type a name for this data field, for example, task_name or task_description. 

All right, as we have all names set properly, it’s time to write a basic Word template. 


The important thing here is the following syntax:

{ task_priority }

{variable_name}

As you see, to properly print our data, we use System name, written inside curly brackets. 

You may perceive this as placeholders for the future text.

Formatting in the Word, applied to this system names, will be the same for printed data later.

Ok, so now let’s write a basic Task Word Template.



{task_name}

{task_link}



Priority: {task_priority}

Responsible: {task_responsible}

State: {task_state}


                    

Description:

{task_description}


Details and Remarks:

{task_details}





Phone: {task_phone}     Email: {task_email}   Start Date: {task_start_date}






As you can see, we used System names task_name, task_link, task_priority, task_responsible, task_state, and so on. And they all go inside curly brackets. 

What we do next. 

We need to upload this document in our App. 

To do this, go to the “View data type” of your page. Inside the “Views” panel click on plus to add a MS Word template. Write a name and upload the file we have just created.


Ok, but when and how can we generate this template? 


To do this, open your web page editor and add a button. Let’s name it “Generate Word”.  Ok, now go to the PROPERTIES of the button. Inside the “Actions” menu you see three fields, and it’s “Before server action”, “Server action” and “After server action”. As our servers will handle that request, generate this file, we will choose “Server action”. Here is how our page looks like at the moment.


You may ask, how the App knows which template to use. In our example the first added template is used by default, so it will be handled automatically. 

Now Reload(Build and Deploy the App). 

So, now we want to generate a simple template. Let’s add a new task and some task data. 


And the last thing we need is to click on the “Generate Word” Button. The download will start automatically. And here is the result!



Learn How to use Word Templates

www.example.com



Priority: Normal

Responsible: Mr. J.

State: In process


Description:

Long description


1) Create CodeJig App Template

2) Assign System names to variables

3) Create a Word Template

4) Import word template

5) Restart an App

6) Generate Word File


Details and Remarks:

Some details if necessary





Phone: +1-541-456-123 Email: me@mail.com Start Date: 30/09/2020 15:38:00