When an online user visits a dynamic web page, data is automatically moved to the page from a data storage area. That storage area is called a data set.
A data set is a table with columns and rows filled with content (e.g. text, numbers, dates, images, etc.). If you've worked with an Excel spreadsheet, you know what a data set looks like.
There are two ways to create a data set: import an Excel file from your computer or create a data set online. This article shows you how to create a data set online.
To learn how to import an Excel file from your computer, see:
Data set tools
A toolbar runs across the top of the data set page. To learn about these tools, see:
Next steps
After creating a data set (using either the online or import method), you need to complete two more steps in this order if you want to create a dynamic web page:
- create a template page, and then
- map the data.
There are two ways to create a template page. Each option generates a different kind of output.
- Select the Repeater template if you want a long list of items on a single page.
- Select the Details template if you want a separate web page for each item.
After creating a template page (either Repeater or Details), you need to link the template to information in the data set. This linking process is called mapping. For more information, see:
1 Opening the Data page
The first step is to open the Data page.
- On the main dashboard page, click WEBSITE on the top menu.
- If not already open, click the CONTENT menu heading.
- Click Data. The Data page displays.
.
2 Creating a new data set file
The next step is to create a file.
- On the Data page, click the Create Data Set button. You can also click the linked text to get the same result. The Create Data Set panel displays.
- On the Create Data Set panel, enter a unique filename. In the example below, the filename is Rooms for Rent. The filename helps you organize information and does not appear on a website.
- Click Save. The Create Data Set panel closes and an empty data set displays.
3 Adding data fields
Now it's time to add data fields to the empty data set. This is a three-step process: add a column, give it a heading, and set the data type.
Before starting this task, spend some time planning the structure of your data set. You need to know the:
- number of columns
- name of each column (i.e. heading)
- type of data in each column (e.g. text, number, long text, etc.)
3.1 Scenario
In this scenario, we build web pages for a fictitious business that rents rooms. Our aim is to create a new web page for each room that we have. Each web page will have the same layout but different information.
Our data set has five fields (i.e. columns):
- Title (a unique name to organise information in the data set)
- Name (web site visitors see this information - small studio, medium studio, large apartment)
- Photo (a picture of the room for rent)
- Price (US dollars)
- Location (e.g. downtown, beaches, airport)
- Description (a few sentences to describe the room and its location)
3.2 Adding new fields
- Click the green (+) button on the right side of the data set. The Add New Field panel displays.
- In the Add New Field panel, enter text under Field Name. In the image below, we enter Name.
- Click the box below Type and then select the data type from the drop-down menu. The default setting is Text (see Step 4 below for a description of the different types).
- Click OK. The panel closes. The field name appears as a column heading on the data set.
When you create a data set, a new column called Title is automatically added to the data set.
- Repeat these steps until you've added the required number of fields. In the example below, we have five fields.
Select the correct type when you create a field. You cannot change the type after a field has been created. If later you want to change the type, delete the column and re-enter the information with a new type.
3.3 Adding a link column
Adding a column called Link is recommended. If you plan on creating a Details template or a multi-level template, you need to link a web page to a unique column in the data set. We suggest you call the column Link because it is easy to remember, but any name will do as long as it has a few basic features.
These features are:
- the column is a Text type
- every name is unique
- the names do not include spaces, special characters, Chinese characters, or underscores (hyphens are okay)
- choose a name with some SEO benefit (e.g. the word is related to your product or service)
4 Understanding data types
Every field (i.e. column) must have a type. You define type by selecting an option from the Type drop-down menu. The default setting is Text.
In our rooms for rent scenario, we selected the following data types for each column:
- Title: default is Text
- Name: Text
- Picture: Image
- Price: Currency (US dollars)
- Location: Text
- Description: Long Text
All of the data type options are described below.
4.1 Text
Select Text if each cell in a field contains a few words.
4.2 Long Text
Long Text is a good choice if each cell in a field contains a short passage (up to 30 words). Unlike Rich Text, you cannot format Long Text. To edit Long Text, click a cell in the data set. A text box displays the passage.
4.3 Number
A number can be many things, like a quantity or calendar year, but not a date (see below for Date type). If you want to enter a price, see Currency below.
4.4 Decimal
Select this type if you want to display numbers with decimal points.
4.5 Date
This option displays dates as YYYY/MM/DD.
If you enter a date with an improper format, an Invalid date message appears in the data set column.
4.6 Rich Text
Choose this type to style text in the data set with the Edit Content tools (e.g. bold, add links, underline, italics, and lists). The Edit Content tool panel is only available for fields set as Rich Text.
If you plan on publishing blog content or text with specific style requirements, formatting rich text inside the data set is recommended. Because the Data tool is designed to scale web publishing rapidly, you cannot style text on individual template pages.
4.7 Image
Select this type if you want each cell in a column to hold a single picture.
To place an image in a cell:
- Hover the mouse pointer on a cell in a field with the Image type. A green cross displays.
- Click the cell. The Image Picker panel displays.
- Click the pointing finger to insert an image from your Sinorbis file manager.
- Click the Cloud button to upload an image from your computer or drag a photo file from your computer to the Image Picker panel.
- Click OK. The photo now appears in the cell.
4.7.1 Deleting an image
- Double-click the cell with a picture. The Image Picker panel displays.
- Click Clear Image and then OK. The image is removed from the cell.
4.8 Image Gallery
You can insert multiple images into a single cell with the Image Gallery type. You cannot upload multiple images into a cell with an Image type.
Photos inside an Image Gallery cell can be mapped to a Carousel component. A Carousel component can only be mapped from a Details template page; it cannot be mapped from a Repeater template page.
To upload an image:
- Click a cell in a column with the Image Gallery type. The Image Gallery panel displays.
- Hover the mouse pointer on the grey image block. A pencil icon edit tool displays.
- Click the pencil icon. The Edit Image panel displays.
- On the Edit Image panel, click the pointing finger to insert an image from your Sinorbis file manager.
- To upload an image from your computer, click the Cloud button and then select a photo. Or, drag the file from your computer to the Edit Image panel.
- Add a caption. (optional)
- Translate a caption to Simplified Chinese. (optional)
- Add a link to the image (optional). Image links must begin with http:// or https://.
- Check the box to open a link in a new tab. (optional)
- Click OK one time.
To add an additional image:
- Click the round (+) button to add a new grey image block.
- Repeat image insert or upload steps described above.
- Click OK to close the panel.
4.8.1 Deleting an image block
- To delete an empty block or a single image, hover the mouse pointer on a block.
- Click the trash bin.
- To remove all images inside a cell, click the Clear Images button.
- Click OK.
4.9 Currency
Select this field if you want to display money amounts.
- Select a currency from the drop-down menu.
- Check the box if you want to include decimal points.
Currency symbols and commas don't appear in the data set.
Symbols and commas are displayed on published pages. The sample image below shows a template page with a product image, price, and US dollar sign.
4.10 Reference
The reference type connects two different data sets. This is an essential tool if you want to build a multi-level website that uses dynamically loaded data. For more information, see:
5 Adding rows
In the data set, each cell in a row holds content for that record (or item).
- Scroll down to the bottom-left corner of the data set.
- Click the green (+) button. A row is added to the data set.
- Repeat the process to add more rows.
6 Deleting a row
You can delete a row from the data set. Delete removes all the information in a row.
- Locate the row you want to delete.
- Right-click the row number. The row turns green.
- Click Delete in the popup box.
- Click Yes in the confirmation box. The row is removed from the data set.
6.1 Deleting multiple rows
You can delete more multiple rows at one time by holding down the Control (Ctrl) button.
- Click a row with the mouse pointer. The row colour changes to green.
- Hold down the Ctrl button.
- Click another row to delete. Both rows are now green.
- Repeat until you have selected all rows to delete.
- When finished selecting rows, release the Ctrl button.
- Right-click any green row and then select Delete in the popup box.
- Click Yes in the confirmation box. The rows are removed from the data set.
7 Next steps
After creating a data set online, you need to build a template page and then map the data. For more information, see:
Comments
0 comments
Please sign in to leave a comment.