Page Builder: Create Pages

How to make pages with the Page Builder

1. Create a "Page Group"

A "Page Group" is where the page will "live".

Where the Page "lives" will determine how users will browse to it via url or navigation.

In the Admin Dashboard navigation at the top, click the "Page Groups" link.

You will see a list of Page Groups, if there are any.

Click on the "New Page Group" button at the top right if there aren't any where you want your new page to "live".

Enter in meta-data about the new Page Group.

Please note that page groups must be unique as the "slug" gets created from the name. The system will check if it is unique and tell you if it is not.

Congratulations on your new Page Group!

If you didn't make a Page Group, congratulations anyway!

2. Create a "Page"

A "Page" in Diffusion Marketplace, is where users can browse to get information, case and point, COVID-19 information.

1. A "Page" always belongs to a "Page Group" for navigation purposes.
2. A "Page" will have a unique "slug" or "url path" within its Page Group for navigation purposes.
3. A "Page" is comprised of several "Page Components".
4. A "Page Component" is a small building block that renders out in a certain way on the Page's "show view".
5. The Page's "show view" is where the end user will browse to see the fully rendered out "Page".

Please see the Page Component wiki for a guide as to what Page Component does what and renders out how.

To make a "Page", click on the "Pages" link in the top navigation of the Admin Panel.

You will see a list of Pages, if there are any.

Click on the "New Page" button at the top right if there aren't any want to edit.

Fill out the "Page" meta data

1. URL Suffix: the end URL piece that a user would browse to to get to the Page, i.e.: "shark-tank" or "covid-best-practices". This must be in a URL friendly format, or else the system will not know how to browse to your Page. The system will check if your URL is friendly or not, but we suggest filling out this metadata and saving it ASAP so that no errors occur later in the process.
   1. A feature of the URL suffix is you can make "landing pages" or "home pages" for your page group by making the Page's URL suffix "home". This will make the complete URL of the Page "marketplace.va.gov/page-group-name", i.e.: "marketplace.va.gov/covid-19". There can only be one "home" per "Page Group".
2. Template Type: The template for the page.
   1. Default Template Type: renders the page in 12 columns wide, as normal
   2. Narrow Template Type: renders all components, except for the Practices component, in 8 columns wide, this is what makes it "narrow".
3. Title: the title of the page. This gets rendered out as an H1 tag (the largest header).
4. Description: The overall purpose of the page. This gets rendered out as a larger paragraph right underneath the header.
5. Title and Description are visible?: Choose this option if you do not want the top Title and Description section on the Page.
6. Group: The "Page Group" that this page will belong to. This will be included in the final and complete URL of the Page where a user will navigate to. Ex: "/competitions/page-title" where "competitions" is the Group and "page-title" is the chosen url suffix from above. If the url suffix is "home", the complete URL will be "/competitions"
7. Switch to Chrome warning banner: Sometimes Pages will have Call to Action buttons or other links on it that link out to a website that does not support Internet Explorer or Firefox, i.e. Surveymonkey.com. Use this to tell users to switch to the Google Chrome browser for a better experience.
8. Published: this field is readonly. It will be automagically filled in once you're ready to show off your page to the Diffusion Marketplace public. Do not touch this field.

At this point, we recommend saving to seal the deal of having the Page's URL suffix within the Page Group. Also if there are any errors making the components, you won't lose most of your work 😄

If you saved the Page, congratulations! Your Page is created! You can actually browse to it at this moment to check it out. Not much there yet, though. Click "Edit Page" in the Admin Panel to continue to create Page Components.

If you didn't, continue on to create Page Components.

Click on the "Add New Page component" button at the bottom of the "Page Components" section of the form.

This will bring up the first stage of the Page Component interface: a dropdown. This dropdown lists out the different types of Page Components that Diffusion Marketplace can render.

Choose a component from the dropdown.

You will get a different type of form depending on the component chosen.

Please see the Page Component wiki for a guide as to what Page Component does what and renders out how.

For this example, I chose "Heading 2":

Now, fill in the data that needs to be rendered out on the Page for the component:

Click "Create Page" or "Update Page", depending on if you saved it earlier or not.

Congratulations again!

You should now have a Page created, or updated with Page Components!

3. Navigate to your cool new Page

With the Page created, the Admin view of the page has a few nice tools to use.

1. "Edit Page": in the top right corner. You can go back and edit the Page to how you need it to be at any time.
2. "Complete URL" link: this link will open the Page in a new tab for you to look at to make sure it is rendering how you want it to.
3. "Page Group" link: you can click this to look at the Page Group your Page belongs to
4. Other meta data such as "Title" "Description" to make sure it is what you saved.
5. "Components": this is a very skeleton view as to how your page looks. It's mostly for us to make sure the components you chose are in the correct place and has the correct data. To see the Gucci view, use the "Complete URL" link.
6. "Publish Page": When you create your page, it is not live to the wild yet. Only users with the role of "Admin" can see the Page for editing purposes. This "Publish" button is to be pressed when you are ready to release the Page to the public to consume, but you can still browse to it to check it out and edit if need be.
   1. When the Page is "published" the URL cannot be changed for navigation purposes, especially if your page is used in other sites. The only way the URL can be "unlocked" is by deleting the Page. Choose your URL wisely!

4. Publish and Browse to the Page

Two places to "Publish Page":

1. The Pages list. The last action link.
2. The Page's Admin view, underneath the "Components" section, at the bottom of the Page Details section.

Once the Page is ready, in either the Admin "Pages" view or the Page's Admin view, click on the "Publish" button.

Once that "Publish" button is clicked, the Page should now have an "Unpublish" button to take it down, in case you were just kidding about it being ready, or the information is not relevant anymore.

If the Page is "published", any user in the Diffusion Marketplace can navigate to it and peruse its contents.

5. Tips and tricks for Creating/Editing a Page

This part of the application is in development, so:

Like most things you are building/writing/creating...

Save early and often

Report bugs to: [email protected]

1. Moving Components around on the Page: Made a few Page Components but want to rearrange them? There is the word "Move" floating next to the component all the way to the right. It should be about where the middle of the component is vertically. Click, hold, and drag that to "Move" components up and down on the Page. Click "Update Page" to save the position of the components. You can also do this in the "Create" phase of the Page.

2. Deleting Components: To delete a component from the Page, there are two paths:

   1. Component not saved yet: simply hit the "Remove" button at the bottom of the component.
   2. Component is saved, but you don't want it anymore: Click on the "Delete" check box at the bottom of the component, then you must hit "Update Page" for it to be deleted.

5. Create anchor # links to jump to a particular element/component on the same page or when a page loads.

Prerequisite: PB show page /app/views/page/show.html.erb must have an element (<div, ..etc) with an id that is generated dynamically for each instance of the component. For example if there are 5 accordion components on the same page a counter can be used to generate unique IDs for each accordion component - i.e.,

      <% when 'PageAccordionComponent' %>
        <% accordion_ctr += 1 %>
      <div id="accordion_anchor_<%= accordion_ctr %>"/>

So the unique id for each accordion component is "accordion_anchor_1", "accordion_anchor_2", "accordion_anchor_3" ... and so on.

1. When building a PB page - the user can create links to a page that contains the accordion components and add the following anchor information to the url: i.e., /contests/shark-tank#accordion_anchor_2".

2. When the user clicks on the link to the accordion page the new page will load and automatically scroll to the anchor element defined in the url.. ie., #accordion_anchor_2

Note: If creating a link to an anchor tag on the same page.. you can either just add the anchor tag as the url i.e., "#accordion_anchor_3" or provide the path and the anchor to the internal url i.e., "/brads-page-group/brads-new-test-page#accordion_anchor_link_3". The first method will open the page in a new tab and scroll to the anchor. The second method - entering the full internal url will not open a new tab - and just scroll to the anchor tag.