Tutorial - How to Create an Admin Page on Your Wix Website
Are you designing websites for others and would like to know how your client can change text and images on their website without having to go into the Wix Editor, then this tutorial is for you!
Introduction
We are going to use an "In the Press" page as an example. This page has to be regularly updated whenever someone writes an article about our client's business. We would like our client to update the "In the Press" page herself without having to go into the Wix Editor.
We will need the following for our example:
A regular page called "In the Press" with placeholder images and text.
A dashboard page called "Admin Page" with Input Fields.
A database called "Main In the Press".
A database called "Repeater In the Press".
Connect the databases through a dataset to the Input Fields of the Admin Fields.
Create Tables on the Admin Page and connect the Tables to the datasets.
Connect the placeholder images and texts on the "In the Press" page to the databases through a dataset.
The Input Fields on the Admin Page will be connected to the two database so that the information that will be added by the client will be stored in the databases.
The placeholder images and text on the In the Press Page will be connected to the two databases as well so that they will be replaced with the information from the databases on the live site.
To get a good understanding of how to set up something like the above, we will go through the process in chronological order. We will first create the design, then set up the databases and then connect everything to the databases.
1. Design the "In the Press" page
Design the "In the Press" page with a placeholder image and text, and add a repeater with a placeholder image and text, to show the articles.
Make sure that you make the text fields wide enough so that they can contain more text.
Our "In the Press" page looks like this in the Wix Editor:
The pictures and text added to the "In the Press" page are just placeholder pictures and text. They will be replaced by what our client adds to the Admin page on the live website.
To view the live website example, click on "In the Press".
2. Design the Admin Page
We are going to make use of a Dashboard page to create the Admin Page. Dashboard pages are pages you create in the Editor that only appear on your site’s Dashboard.
Because only you and your contributors can access your Dashboard, no other visitor to your site will be able to see or use these pages.
Note that Dashboard pages do not have headers or footers. Read through this Wix Support Page to learn more about Dashboard pages.
2.1 How to Add a Dashboard Page
1. Enable Corvid in the Wix Editor by clicking Turn on Dev Mode.
2. On the Add menu, click Page, and then click Dashboard Page.
3. In the Dashboard Pages panel, give your new page a name.
2.2 Add input fields and upload buttons to your Admin Page.
Now that we have created the Admin page, we are ready to add input fields and upload buttons.
Our Admin page for the "In the Press" example comprises two parts:
Main image and text input
Repeater input
For the Main image and text, we need the following:
Text Box to add an introduction text
Upload Button to add an image
Replace the Image & Text button (regular button)
For the Repeater we need the following:
Text Box to add the name of the website where the article is published
Add New Line to the Table Button (regular button)
Text Box to add the article heading
Date Picker to add the date that the article was published
Text Box for the article's excerpt
Upload Button to upload an image that was published in the article
Text Box for the article's URL (set the type to URL by clicking on the box's Settings)
Save or Edit Button (regular button)
Delete Article Button (regular button)
Go to "In the Press" Page Button (regular button)
Text Boxes, a Date Picker, and Upload Buttons can be added by:
Click Add on the left side of the Editor.
Click User Input.
Click and drag the Text Box, Date Picker, or Upload Button of your choice.
You can learn more about the different User Input Elements and how to use them through Wix Support.
3. Adding the Database Collection "Main In the Press"
The "Main In the Press" database collection is where we will store the main image and text that will be submitted through the Admin Page.
3.1 Create the Database Collection
To create the collection:
In the Site Structure sidebar, click the + icon next to Database and select New Collection. If the “Introducing Database Collections” screen pops up, click Start Creating.
In the Create a Database Collection screen, give your collection a name. In our case, the name is Main In the Press.
From the dropdown, select the intended use for your collection. Consider which visitors you want to be able to read, write, modify, or delete your data. For your page, you should choose one of the presets that allows visitors to view content, such as the Site Content preset. Click Create Collection. The Data Manager opens. This is a spreadsheet-style table that lets you add content to your database collection.
Our database has the following permission settings:
3.2 Set up the Database Collection
We are going to add two fields to the Main in the Press database collection. One for the image and one for the text.
To set up a collection:
In the Data Manager at the right of the header row, click the + sign to add a field to your collection.
Set up the Field Type to match the information you want your visitors to see. Make sure to select the correct data type to match your field’s content.
We have the following Fields and Field Types:
Main Image - Image Type
Main Text - Text Type (default setting)
4. Adding the Database Collection "Repeater In the Press"
Adding the database collection "Repeater In the Press" works the same as described in 3.1 and 3.2.
For the database collection "Repeater In the Press", we have the following fields:
Website Name - Text Type (default setting)
Article Heading - Text Type (default setting)
Article Date- Date and Time Type
Article Excerpt - Text Type (default setting)
Article Image - Image Type
Article URL - URL Type
5. Connect the databases through a dataset to the Input Fields of the Admin Page
Now that we have set up the databases, we can add datasets to the Admin Page and connect the input fields.
We are going to set up two datasets and call them:
Main in the Press
Repeater in the Press
To add a dataset to your page:
Go to the Add menu.
Click Database, and then Dataset. A dataset is added to your page.
Select the dataset and click Manage Dataset. The Dataset Settings panel opens.
Under Connect a Collection, select your collection.
Select Read & Write for the Mode.
Select Add Sort then click Article Date under Field and select New --> Old under Order. Then click Add Sort. This way the newest articles will show first.
Now that the dataset has been configured, Input Fields can be connected to it. You need to go to each of the Input Fields on the Admin Page and connect it to a dataset.
Connect the Input Fields to the dataset:
Select an Input Field and click its Connect to Data button.
Select the field in the collection where the information is stored.
Repeat this for each of the Input Fields on the Admin Page.
Connect the Replace Image & Text Button to the dataset:
Select the Image & Text Button and click its Connect to Data button.
Select Click action connects to and then Submit.
Connect the Add new line to table Button to the dataset:
Select the Add new line to the table Button and click its Connect to Data button.
Select Click action connects to and then New*.
Make sure that the Repeater In the Press Dataset is set to Read & Write. If that's not the case then it's not possible to select New.
Connect the SAVE OR EDIT ARTICLE Button to the dataset:
Select the SAVE OR EDIT ARTICLE Button and click its Connect to Data button.
Select Click action connects to and then Submit.
Connect the DELETE ARTICLE Button to the dataset:
Select the DELETE ARTICLE Button and click its Connect to Data button.
Select Click action connects to and then Delete.
Connect the Go to the In the Press Button to the page "In the Press.
6. Create Tables on the Admin Page and connect the Tables to the datasets.
After setting up and connecting the input forms we are ready to submit information through the Admin Page. The information that will be added will be directly live on our "In the Press" page. To make sure that this information is correct, it is way easier to have a table on the Admin Page that shows all the information that has been added (especially for the repeater), than having to go back and forward between the Admin Page and the "In the Press" page. Therefore we will add two tables to the Admin page.
Add a table:
Click Add on the left side of the Editor.
Click Lists & Grids and scroll down to Tables.
Click a table to add it, or drag the table to the relevant location.
Before you change the settings and/or design of the table, first connect the table to the dataset.
Connect the tables to the dataset:
Select the table and click its Connect to Data button.
Choose Main in the press database or the Repeater in the press database, depending on which table you are connecting. This automatically connects the fields in your collection to the columns in the table.
Click Manage Table to delete the Title Column from the table as this is an empty column.
Change the Layout and Design of the table so that it fits the design of the page.
This is how our tables and input fields look like:
We also add some text to explain to our clients how they can add, edit, or delete articles. This is the text we add:
To add an entry:
Scroll down to the form below the table.
Click the Add New Line to the Table button.
Add the data and click the SAVE OR EDIT ARTICLE button.
To edit an entry:
Hover over and scroll through the table.
Click on the row that you would like to edit.
Scroll down to the form below the table.
Edit the data and click the SAVE OR EDIT ARTICLE button.
To delete an entry:
Hover over and scroll through the table.
Click on the row that you would like to delete.
Scroll down to the form below the table.
Click the DELETE ARTICLE button.
7. Connect the placeholder images and texts on the "In the Press" page to the databases through a dataset.
To display the database content on the "In the Press" page, the image and text elements have to get connected to the Main in the Press database and the Repeater in the Press database.
Add and connect two datasets on this page (see 3.1 and 3.2), one to the Main in the Press database and one to the Repeater in the Press database. Set the Data Settings Mode to Read-only.
Connect the image and text element to the Main In the Press datasets:
Select an image or text element on the "In the Press" page.
Click the Connect to Data icon.
Select the Main In the Press dataset under Connect a dataset.
Connect the following elements to the Main In the Press dataset :
Image (#Image38) to Main Image
I'm a paragraph (#Text226) to Main Text
The above property IDs relate to the # on our site, they will have a different # on your site, see screenshots below:
Connect the repeater to the datasets:
Select repeater on the "In the Press" page.
Click the Connect to Data icon.
Select the Repeater In the Press dataset under Connect a dataset.
Connect the image, text, date, and button elements to the Repeater In the Press datasets:
Select an image or text element on the "In the Press" page.
Click the Connect to Data icon.
Select the Repeater In the Press dataset under Connect a dataset.
Connect the elements in the repeater as follows:
Image to Article Image (Image)
Website name to Website Name (Text)
Article heading to Article Heading (Text)
Article excerpt to Article Excerpt (Text)
Article date to Article Date (Date and Time)
Read more button to Article URL (URL). Through the Connect Data icon, NOT by linking
8. Test the Admin Page and "In the Press" Example Page
To be able to change the main image and text of the "In the Press" example page, you will have to add an image and text to the database first.
Open the Main in the Press Database and double-click on the fields to add an image and text.
Synchronize the database:
Click Sync
Select Copy all items (Sandbox --> Live)
Click Sync
If you don't do this, the image and text you just added will not be visible on the Dashboard page.
Publish the site!
Now go to your site's Dashboard and change the main image and text, and add some article data.
View the "In the Press" page to check if everything you added is there. See https://www.wixcreate.com/in-the-press-example
NOTE: you won't see anything when previewing the "In the Press" page in the Editor unless you sync the databases and use Replace all items (Live --> Sandbox).
Check out our WIX CORVID AKA WIX CODE page and scroll down for more tutorials and Wix Corvid Examples!
Would you like us to design an Admin Page for you? Contact WixCreate!
