Iolanda Santos

Customer Support Manager

How to make a dynamic page in Ycode

What is a dynamic page?

A dynamic page is basically a template with building blocks, where each block is linked to content from your database—think headline, image, date, blog text, etc. In this example, each block is a different job listing, as we’re building a job overview page!

Documentation: Dynamic pages

How to make a dynamic page

In this example, we’re going to create a dynamic page template for job listings. As it’s a template, you’ll be able to use the same layout as many times as you want.

To create a dynamic page, we first need to have a database.

1. Create a database

Let’s start by creating a database. Navigate to the Left-side panel and click on the second icon from the top, named Databases

Now click on + Create local database. If you already have a database, you can also click on the plus sign (+) next to your local database. 


Then give your database a name. We named ours “Job Listings”.

In the database, we will need to create various fields to compose our list. For this example, we will be creating a total of five fields.

Let's first create two text fields. To create a new field, click on Add field, select Text and give the field a name. We’re naming the fields:

  • Job Title
  • Time

Then we’ll create three textarea fields. To create these fields we click on Add field, and this time we select Textarea. We named our fields:

  • Expectations
  • Offer
  • Reach Us


Now in your database, open the Application data tab. Here you can add all the field information for each job listing.

To add data, you have two options: 

  1. Create a new data entry and add the information manually 
  2. Import data through a CSV file (click here for instructions)

For this example, we’ll create a new data entry and input all of the information manually. You can create a new data entry by clicking on + New entry. You will then see a window where you can insert all the information.


In our case, one of our entries will be for a Front-end Developer job posting, so we’re going to fill all the fields accordingly (see below).

When you’re done, click on Create.


You can always create more fields by clicking on + New entry. Once you have all of your entries filled up, it’s time to create our dynamic page.

2. Create a dynamic page

Go to the Left-side panel and click on the third icon, Pages. Once you’re there, create a new page by clicking on the + icon and selecting Dynamic page.


We’re going to name our page “Job Listing”, and then we’ll select our Data source, which is our newly-created database“Job Listings”.


Next, click on Create & edit design. This brings you back to the canvas. In the top left corner, you’ll see that now we’re on the page that we just created. Right next to it, you see “Data: None”—we’ll come back to this field a bit later on.

Now it’s time to create our job listing! Here’s how to build your list:

  • Go to the Top panel
  • Select the Square icon
  • Add a Container 
  • Inside the container, add a Div block
  • Within the Div block, add a Heading 1 and then an Inline Text element
  • Finally, add a Heading 3 followed by a Paragraph. Repeat this action two more times


Now select Heading 1 and open the Settings tab on the right side. Next to the Key, select Job Title. Your canvas should now show “Page data - Job Listing Job Title”. Repeat this step for all of your elements (excluding the Heading 3 elements) and choose the Key accordingly to what you added to the database.


Your Heading 3 elements will have static text because they won’t change content like the other elements. The text for these elements will be:

  • What we expect from you
  • What we offer
  • Interested?

Your final result should look something like this:


Now go to the top left corner and select Data: None and choose 1.


You will now see that on the canvas, everything is filled with the information you added to your database entries. 

Every time you make a new entry in that database, it will add a new page to your dynamic page. You can double-check this by clicking on Data: None. You'll see that there are more options to click (1, 2, 3, and so on).



How to make a dynamic list in Ycode

What is dynamic content?

Dynamic content is content that changes dynamically. Instead of inserting web elements and adding the content in there directly, you connect the element to a database field, every time you make changes on the database field your element will also change accordingly.

Documentation: Dynamic content

How to make a dynamic list

In this example, we are going to be making a dynamic list of historic places in the United Kingdom. Let’s start by creating a database. Navigate to the Left-side panel and click on the second icon from the top, named Databases

Now click on + Create local database. If you already have a database, you can also click on the plus sign (+) next to your local database. 


Then give your database a name. We named ours “List”.

In the database, we will need to create various fields to compose our list. For this example, we will be creating three fields, one for the location names, one for descriptions, and one for images. 

To create a new field, click on Add field, select Text and give the field a name. We named this field “Locations”.

Then, let’s add another field. This time we select Textarea. Give this field a name and save it as well. We named this field “Descriptions”.


Finally, let’s add one last field. This time we select Image. Give this field a name and save it as well. We named this field “Images”.


Now in your database, go into the Application data tab. Here you can add all the information necessary to complete our list of historic locations in the UK.

In this case, we have two options: You can either create a new data entry and add all the information manually or you can import data through a CSV file. For this example, we’ll create a new data entry and input all of the information manually. Create a new data entry by clicking on + New entry.


You will then see a window where you can insert all the information necessary. In our case, one of the locations is Edinburgh Castle. 

This is what we filled in this entry:

  • For the Name and Locations fields, we inserted “Edinburgh Castle”
  • In the Description field, we added a quick description of the location
  • For the Image field, we uploaded a picture of the location

When you’re done, click on Create.


You can always create more fields by clicking on + New entry. Once you have all of your entries filled up, it’s time to go back to our canvas and start building our list.

To build your list in the canvas:

  • Go to the Top panel
  • Select the Square icon
  • Add a Container 
  • Inside the container, add a Div block
  • Within the Div block, add a Heading and a Paragraph (both under the T icon)
  • Then add an image Placeholder (under the Folders icon)



Now select the Div block and open the Settings tab on the right side. Next to the Source, select the database you want to connect (the one we created at the beginning, named “List”).


Then select the Heading layer, open the settings again and as the Key, select the field you wish to use. In our example, we choose “Locations”.


Repeat the previous action for the Paragraph. Open the Settings and as the Key, select the field named “Descriptions”.


Finally, repeat the previous action one last time for the Image Placeholder. Open the Settings and as the Key, select the field named “Images”.


Now every time you add or delete an entry from the database, it will automatically update on your canvas without you having to make any manual changes or updates.



How to make an SVG icon list in a grid element in Ycode

What is an SVG icon?

SVG icons are a type of image format that’s flexible and suitable for web projects. With the SVG icon format, you can easily change the icon’s size and color. And that’s exactly what Ycode supports!

Documentation: SVG icons

How to make an SVG icon list in a grid element

In this example, we’re going to create a social media icons menu using SVG icons in a grid element. 

Let’s start by navigating to the Top panel. Click on the first icon, named Square icon. Then we will select the Grid element.


We’ll use a grid element with a total of three columns. You can always change this in the Right-side panel. Open the Design tab and select Layout—here you can then add the columns.


Now go to the Layer sidebar, when making a grid element Ycode automatically creates four Grid items for this example we are only going to need three, so go ahead and delete one of them.

Do keep in mind that you can always add the amount of Grid items you want by clicking on the +sign right next to the Grid element.



Now we are going to add our icons. Go to the Top panel and click on the Files icon. Then select the Icons tab—here you can click on Upload icons or Import SVG code.


For this example, we uploaded a couple of icons, selected the correct grid item and then chose the icon for that grid.


You can fill the grids like this, and if you want to make any changes,  you can always navigate to the Right-side panel and open the Design tab.

How to add newsletter type forms in Ycode

What is a newsletter type form?


Form elements can be used for simple contact forms, but also surveys, polls, applications and more. In this example, we’ll create a newsletter form with which you can collect email addresses and grow your email list.

Documentation: Form

How to use newsletter type forms in Ycode


Let’s start by adding a form into your canvas. Go to the Top panel, then click on the fifth icon from the left and select Form from the dropdown menu.


With the Form element selected (click in the Canvas or the Layers sidebar), navigate to the Settings tab on the right-hand side.

As the Form type, choose Newsletter. Below you can then select the provider. Currently only MailerLite is available as a provider, so we’ll select that. Then you’ll need to input the API Key. Follow these instructions to find the API Key in MailerLite.

Once that’s done, you can choose the subscriber group you want to add people to. If you leave this field empty, the person will be added to the general subscriber list.


And finally, choose which page people should be redirected to after they subscribe to your newsletter. In the Layers sidebar on the left, click on the Submit button layer. Then head back to the Settings tab on the right and Add a new action. Then choose the page that you want the user to see after they’ve submitted their contact details.




Watch the video

 

Like Comment

How to add data type forms with comment sections in Ycode

What is a data type form?


Form elements can be used for simple contact forms, but also surveys, polls, applications and more. In this example, we’ll create a form with which you can save information submitted by users, and show user comments on your web page.

Documentation: Form

How to use data type forms in Ycode


First, let’s create a new database. Create one by navigating to the Left-side panel and clicking on the second icon from the top, named Databases. Now click on + Create local database. If you already have a database, you can also click on the plus sign (+) next to your local database. Then give your database a name. We named ours “Data Form”.


In the database, we only need the necessary fields to create a comment section. To create a new field, click on Add field, select Text and give the field a name. We named it “User”. 

Then, let’s add another field. This time we select Textarea instead of Text. Give this field a name and save it as well. We named this field “Comment”.


Now let’s head back to the canvas and start building the comment section. We’ll use a form to do so.

In the canvas, go to the Top panel, then click on the fifth icon from the left and select Form from the dropdown menu.


With the form layer selected, open the Settings tab on the right-hand side. As the type form, choose Data. As the source, choose Data Form (the name of the database we created earlier). Then for fields, checkmark the fields “User” and “Comment” — the fields we created a little while ago.


Now we click on the Submit button layer. You can find this layer by looking in the Layers sidebar on the left. Once selected, go to the Settings tab on the right. Here you can choose what will happen once the user clicks on the submit button.

Click on Add action. You’ll have one option: “When Submit button is clicked”.


Then add another action, select Data and choose “Create new record in Data Form”. This will save each comment that a user submits in your database.


Finally, add one last action. Choose Navigation and select which page you want the user to be redirected to once they click the submit button. In our example, we selected the homepage.



Want comments to show up on the page, not just in the database records?


That’s possible! First, open the page that should display the comments in the canvas.

We’ll make a dedicated section for the comments. In the Layers sidebar, decide where the comment section should be displayed.

Go to the Top panel, select the Square icon and then add a Container and a Div block. Within the div, add a Heading and Paragraph (find these elements under the T icon).


Now select the Div block and open the Settings tab on the right side. Next to the Source, select the database you want to connect (the one we created at the beginning, named “Data Form”).


Then select the Heading layer, open the settings again and as the Key, select the field you wish to use. In our example, we choose “User”.


Finally, repeat the previous action for the Paragraph. Open the Settings and as the Key, select the field named “Comment”. Now every time someone submits a comment, it will show up on your page. You can style the comment section so it fits your page design!



Watch the video

 

Like Comment

How to embed HTML elements in Ycode

What is HTML embed?


We want you to be able to flexibly build with Ycode, that’s why you can add any piece of code via HTML embed. This gives you the power to use custom functionality on your web apps and websites.

Documentation: HTML embed

How to use HTML embed in Ycode


First copy the embed code of the item you want to embed to your clipboard. In Ycode, go to the Top panel, select the Pointer icon and then click on the HTML embed

Some things to keep in mind:

  • There’s a maximum of 10,000 characters for embedded code
  • Adding <html></html>, <body></body> or <head></head> tags breaks the project
  • If your embed code has opening and closing tags, make sure to add them in there


Once the embedded block is added in your canvas, double-click in the element to make edits. Then paste the copied custom code. The custom code is automatically saved, you can just click anywhere in the canvas.


In our video example, we embedded a Facebook post. However, you can add many different applications, such as YouTube videos, Instagram feeds or today’s weather.

How to edit an embedded element


Whenever you want to edit your embedded element, just select the layer and click on Edit code in the canvas. Now you can make your changes. 

You can even change the height and width of your embedded code by adding [height="100%" width="100%"] and change the percentages accordingly.

Keep in mind that most embedded code already comes with height and width tags. Like this:


If that’s the case, you don’t need to add the tags again. Instead, simply change the numbers or percentages in front of the tags accordingly.




Watch the video

 

Like Comment