ST. Louis Children’s Hospital

Administration Guide

June 7, 2012
Version 1.0

© 2012 St. Louis Children’s Hospital

All rights reserved. No part of this publication may be reproduced, stored in a retrieval

system, or transmitted in any form or by any means, electronic, mechanical, photocopying,

recording or otherwise, without the prior written permission of St. Louis Children’s Hospital


TABLE OF CONTENTS

Content Editing 4

The Basics 4

Task 1: Logging Into the Site 4

Task 2: Finding Content to Edit 4

Task 3: Editing Content 5

Task 4: Adding New Content 10

WebForm Creation & Management 12

Editing Webforms 12

Task 1: Finding Your Form to Edit 12

Task 2: Editing and Adding New Form Fields 12

Form Submission Action Setup 13

Step 1: Email Action Setup 13

Step 2: Specific Form Confirmation Setup 13

Modifying Form Layout, How To 15

Form Field Validation, How To 16

Task 1: Locating Your Form Validation Settings 16

Task 2: Adding Validation Rules 16

Adding Webforms 16

Cloning Webforms 17

Task 1: Finding the Form to Clone 17

Task 2: Editing Your Cloned Form 17

Calendar Event Administration 18

Step 1: Creating Event Content 18

Step 2: Creating Calendar Event Content 19

E-Commerce Management 22

Creating New Products, How To 22

Task 1: Create Product Node 22

Task 2: Create Product Attributes 22

Editing Existing Products, How To 23

Task 1: Finding Your Previously Created Product 23

Task 2: Add Attributes to the Product 23

Administering Product Orders, How To 24

Task 1: View Orders Placed 24

Task 2: Update Order 24

Exporting Product Orders, How To 25

Task 7: Publishing Products (can only be done by admin) 25

Administrator Capabilities 26

Managing User Accounts 26

Task 1: Creating a new user 26

Task 2: Add/Remove user permission groups from existing account 26

Content Workflow Management 27

Task 1: Approving new content revisions. 27

Managing Slides and Slideshows 28

Task 1: Create new slide 28

Task 2: Adding slide to slideshow 28

Managing Left Navigations via the Menu system 29

Task 1: Adjust menu items 29

Managing Mini Panels for Site Landing Pages 30

Task 1: Edit Mini Panels 30

Content Editing

The Basics

Task 1: Logging Into the Site

A prerequisite to editing content is being logged in with your provided author/administrator account. To login:

  1. In your browser, navigate to http://www.stlouischildrens.org/admin
  2. Enter your provided credentials in the boxes and click ‘Login’

You will be redirected to the admin page, and can now perform your site administrative actions.

Task 2: Finding Content to Edit

There are two methods of finding content that is in need of editing. These are discussed below:

1.  If you know where on the site the content is that is in need of editing, you can browse directly to it and access the editor from that page. For example:

a.  Browse to: https://www.stlouischildrens.org/resources/community-education, and assume the text in the content area needs to be edited.

b.  There should be a horizontal list of action links

Or

c.  When content is edited on the site by an author, those changes are not published immediately to the site. They must first be reviewed and approved by an editor/admin. When you see the ‘View current’ and ‘Edit current’ links, this signifies that there are no pending revisions for that content and that you’ll be editing what is currently displayed on the site. If the links ‘View latest’ and ‘Edit latest’ are shown, this signifies that when you edit the content, you’ll be editing the latest revision to the content

2.  If the title of the content/page is known, the Drupal admin area can be utilized to find the content to edit.

a.  Browse to: https://www.stlouischildrens.org/admin

b.  In the left column, under ‘Administer’, click ‘Content management’

c.  Once ‘Content management’ menu expands, click ‘Content’

d.  At the top, there are a number of filter fields to narrow down the list of content at the bottom based on criteria entered into them.

e.  In most all cases, you will use ‘Title contains’ to find the content. Enter a value, for example: ‘Community Education’ and click the ‘Apply’ button.

f.  Below, the list of content rows should narrow where the title only contains your search term.

g.  Once you determine the item that you need to edit, you can click the ‘Edit’ link on that row to begin the process.

Task 3: Editing Content

To edit content in the system essentially means modifying a number of form fields and submitting the item for review. The changes made will not immediately go into a published mode and display on the site. The changes will be stored in a revision that will be reviewed by an administrator and if approved, will then be published to the live site. In this example, we will update an existing “Page”: Family Resource Center. Follow the steps above to find the page on the site and click the ‘Edit’ link. Below is a description of the fields available. The fields mentioned are the only fields you will be concerned with editing. Other fields that are not discussed should not be modified.

1.  Title – The title of the page that is displayed in the page banner

2.  Body – This is the actual content displayed on the page. This field utilizes a ‘Word-like’ editor which will allow for any text manipulation and placement and also allow for inserting images, links and file references. There are 3 aspects to focus on when using the text editor: adding/uploading images, creating internal links, inserting video(s) into content

a.  Adding/uploading images

  1. Click image icon:
  2. On ‘Insert/edit image’ popup, click the browse icon next to the ‘Image URL’ field.

iii.  A File Browser window will pop up. You can browse through all images on the site by navigating the folders on the left and viewing the images on the right.

  1. To select an image, simply double click on the file you want to use, the window will disappear and the image information will display in the ‘Insert/edit image’ window.
  1. Now click the ‘Appearance’ tab in the ‘Insert/edit image’ window. Here you can set the image alignment, spacing and border. It is recommended to put a value of ‘5’ in both the Vertical space and Horizontal space fields. This allows text surrounding the image to be spaced evenly.

  1. Click ‘Insert’. The image will now be inserted into the text block where the cursor was previously set.
  1. If you have an image that you need in the text, but it doesn’t currently live in the file system, you can upload it first. Repeat steps i-iii to get back to the file browser window.
  1. Browse to the folder where your image should live. For organization purposes, you should try to upload your images to a folder specific to the section of the site the page lives on. For example, if I was updating a page in the ‘About Us’ section of the site, I would want to upload an image into the ‘images’ folder under ‘about_us’. If there is no ‘images’ folder in the section you are concerned with, you can create the folder. If there is a folder, you can skip this step. Click ‘Manage directories’ from the top menu. On the little popup, add your directory name and click ‘Add’. Done! Now you can browse to that folder.
  1. Once in the folder, click ‘Upload’ from the top menu.
  1. A small dialog will open up. In this window, select ‘Choose File’ to select a file on your machine. Once you have selected the file it will populate in the box. Next click ‘Upload’. Done! *Note: You can upload any type of file, not just images. This is useful if you need to link text to a PDF or other text document.

  1. Now that the image is uploaded, just repeat steps iv – vi above and the image will be inserted into your content.

b.  Uploading PDF documents to be linked

  1. The process to upload a PDF document (or any other type of document, is identical to that of uploading images. Refer to items viii - x in the previous section to add your PDF files to the file structure.
  2. Once the files are in the structure, you can create links to them using the text editor link mechanism (chain link icon).

c.  Creating links to internal site pages.

  1. Select the text that needs to be linked.
  2. Click the ‘Linkit’ icon:
  3. On the Linkit window, try typing the name of the page on the St. Louis Children’s website. When you type, notice that the search box will help you find the page you are looking for.
  1. Select the right page from the dropdown (if found) and click ‘Insert’. *Note, if you are linking to a page on an external site, you can simply enter the URL of that page here and the link will be made.

d.  Adding videos into content.

  1. Click ‘Bits on the Run’ link directly below the ‘Title’ field.

  1. Enter some search text into the box. As you type, the videos shown will change based on keyword matches. Once the video you are looking for appears, either click the title, or click the ‘Add’ button.
  1. In the ‘Body’ content, at the bottom, you will now notice some new text that is formatted as follows: [bitsontherun Ks8A88Kw] (the ‘Ks8A88Kw’ is just a sample; this will be different for each video). Place this text segment anywhere you need to in the text content. When the page renders, the snippet will be replaced by the video player.

3.  Log Message – Any time content is edited on the site, you will want to add a note into this field describing the changes that actually were made. When you save the content, an approver will see this message and know what to look for.

4.  Save – Once you have edited the necessary content and added a log message, click ‘Save’ button to send a revision notice to an approver to review.

Task 4: Adding New Content

The concept of adding new content is not much different than editing content. The same fields will be used, with the addition of adding the content into the menu system. To add content:

1.  From http://www.stlouischildrens.org/admin, click the ‘Create Content’ link from left navigation.

2.  Select the type of content to create. In most cases, this will be ‘Page’.

3.  Add content into ‘Title’, ‘Body’ and ‘Log Message’ as described above.

4.  Scroll down to see a link titled ‘Menu settings’. Click this link to open up the menu dropdown.

5.  Enter the title of the page as it needs to be displayed in the menu structure. In most cases, this would be the same as the title entered above.

6.  In the navigation area beneath ‘Parent item’, browse the menu by clicking the plus sign icons next to the section where the page will go. *Note: New content will only ever be added into the sections prefixed by ‘Top:’. Once you have found the area that this page will live under, click that area, and notice that the name will now display in the ‘Parent item’ field.

7.  Click ‘Save’ to create the new content to be approved.

WebForm Creation & Management

Editing Webforms

Webforms, like pages, are another content type in the Drupal system. You will add/edit them in a similar fashion that you would with pages, with the extra step of creating the form fields themselves.

Task 1: Finding Your Form to Edit

On the admin content page (http://www.stlouischildrens.org/admin/content) select ‘Webform’ from the ‘Type’ select list and click ‘Apply’. This will show you all of the existing webforms in the system. For the webform you wish to edit, click the ‘edit’ link.

Task 2: Editing and Adding New Form Fields

1.  Initially, you will be taken to the edit page of the form. This contains the title, menu settings and body. The title and body will display on front end page above the form itself. Make any changes necessary here and click ‘Save’. If no changes necessary, click the ‘Webform’ link from the links at the top.

2.  This page contains all of the field options for building the form itself. In the right column, notice the items under ‘Add a field’. These are all of the field types you can add to a form. To add them to the form, you can click and drag one of the fields directly onto the form in the placement desired.

3.  Once you have dragged the field to the form, hover over the field. Notice an outline displays around the new field. Click the little pencil icon in the top right corner to update properties. The settings below are related to the ‘Textfield’. Other field types may have other settings to define.

a.  Properties tab –

  1. Title – The label for the form field.
  2. Form key – Do NOT modify this. For backend purposes only.
  3. Default value – If the field should be pre-loaded with a default value, it would go here.
  4. Description – Descriptor text that will display beneath the field.

b.  Display tab

  1. Prefix – Any text that should display before the field.
  2. Suffix – Any text that should display after the field.
  3. Size – How wide the field should be.

c.  Validation tab