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:

  1. A regular page called "In the Press" with placeholder images and text.

  2. A dashboard page called "Admin Page" with Input Fields.

  3. A database called "Main In the Press".

  4. A database called "Repeater In the Press".

  5. Connect the databases through a dataset to the Input Fields of the Admin Fields.

  6. Create Tables on the Admin Page and connect the Tables to the datasets.

  7. 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 a chronological order. We will first create the design, then setup 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:

In the Press Example Page, 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.

Enable Corvid

2. On the Add menu, click Page, and then click Dashboard Page.

Add a Dashboard Page

3. In the Dashboard Pages panel, give your new page a name.


Name the Dashboard Page

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 of two parts:

  1. Main image and text input

  2. 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 Image & Text button (regular button)


Add Input Fields and Buttons to the Admin Page

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)


Add Input Fields and Buttons to the Admin Page

Text Boxes, a Date Picker, and Upload Buttons can be added by:

  1. Click Add on the left side of the Editor.

  2. Click User Input.

  3. 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 the main image and text that will be submitted through the Admin Page.



3.1 Create the Database Collection


To create the collection:

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

  2. In the Create a Database Collection screen, give your collection a name. In our case the name is Main In the Press.

  3. 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:


Database 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 tex.

To set up a collection:

  1. In the Data Manager at the right of the header row, click the + sign to add a field to your collection.

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

Setting up the Main in the Press Database Collection

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


Setting up the Repeater in the Press Database Collection

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:

  1. Main in the Press

  2. Repeater in the Press


To add a dataset to your page:

  1. Go to the Add menu.

  2. Click Database, and then Dataset. A dataset is added to your page.

  3. Select the dataset and click Manage Dataset. The Dataset Settings panel opens.

  4. Under Connect a Collection, select your collection.

  5. Select Read & Write for the Mode.

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

Adding a dataset to the Admin Page

Settings of the Dataset

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:

  1. Select an Input Field and click its Connect to Data button.

  2. Select the field in the collection where the information is stored.

  3. Repeat this for each of the Input Fields on the Admin Page.


Connect the Replace Image & Text Button to the dataset:

  1. Select the Image & Text Button and click its Connect to Data button.

  2. Select Click action connects to and then Submit.


Connect the Button to the Dataset

Connect the Add new line to table Button to the dataset:

  1. Select the Add new line to table Button and click its Connect to Data button.

  2. 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:

  1. Select the SAVE OR EDIT ARTICLE Button and click its Connect to Data button.

  2. Select Click action connects to and then Submit.


Connect the DELETE ARTICLE Button to the dataset:

  1. Select the DELETE ARTICLE Button and click its Connect to Data button.

  2. 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), then 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:

  1. Click Add on the left side of the Editor.

  2. Click Lists & Grids and scroll down to Tables.

  3. 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:

  1. Select the table and click its Connect to Data button.

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

  3. Click Manage Table to delete the Title Column from the table as this is an empty column.

  4. Change the Layout and Design of the table so that it fits the design of the page.


This how our tables and input fields look like:

Input Fields and Table for the Main Image and Text

Input Fields and Table for the Repeater

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:

  1. Scroll down to the form below the table.

  2. Click the Add New Line to the Table button.

  3. Add the data and click the SAVE OR EDIT ARTICLE button.

To edit an entry:

  1. Hover over and scroll through the table.

  2. Click on the row that you would like to edit.

  3. Scroll down to the form below the table.

  4. Edit the data and click the SAVE OR EDIT ARTICLE button.​

To delete an entry:

  1. Hover over and scroll through the table.

  2. Click on the row that you would like to delete.

  3. Scroll down to the form below the table.

  4. 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:

  1. Select an image or text element on the "In the Press" page.

  2. Click the Connect to Data icon.

  3. Select the Main In the Press dataset under Connect a dataset.


Connect the following elements to the Main In the Press dataset :


The above property IDs relate to the # on our site, they will have a different # on your site, see screenshots below:


Connect the Image to the Dataset

Connect the Text to the Dataset

Connect the repeater to the datasets:

  1. Select repeater on the "In the Press" page.

  2. Click the Connect to Data icon.

  3. 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:

  1. Select an image or text element on the "In the Press" page.

  2. Click the Connect to Data icon.

  3. Select the Repeater In the Press dataset under Connect a dataset.


Connect the elements in the repeater as following:

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


Add an Image and Text to the Database by Double Clicking the Field

Synchronize the database:

  1. Click Sync

  2. Select Copy all items (Sandbox --> Live)

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


Dashboard Admin Page - Main Image and Text Part

Dashboard Admin Page - Repeater Part

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!







Official Wix Expert & Wix Agency Partner

© 2020 by WIXCreate.com

I  All Rights Reserved  I  info@wixcreate.com  I  202-640-5440

facebook-2.gif