- Logging in
- Drupal Views Tutorials
- Adding users via CAS
- Creating Accordion Menus
- Creating a Panel Variant
- Managing URL Aliases
- Creating a sub-theme
- Configuring sub-themes
- Change the banner image
- Managing Broken Links
- SiteBuilder Sessions
- Training Videos
- Find a Node ID
- Creating “Add to Calendar” Links
- Webforms in Drupal
Logging into your Drupal Website
Logging into your site requires you to use your Western Universal ID. Follow the steps below to login:
- Go to your website url /user. For example, webtech.wwu.edu/user
- Click the Login button
- You will be redirected to the universal login screen.
- Enter your Western Universal ID and password
- Click the login button again
- If successfully logged in you will arrive at your profile page.
Once logged in you can edit your profile and update other pages as your roles within the Drupal site allow.
Views in Drupal
These are well crafted tutorials to help you further explore the world of Views.
- Drupal Views project page
- Level Up Tuts
- Mustard Seed Media (These are just general videos but are well executed)
Adding CAS users to a Drupal Site
If you are onboarding a new Drupal user or administrator, you will need to create credentials for their universal ID in Drupal.
- Log in to your site by navigating to /user and using Universal Login. You should see the black administrative toolbar across the top of the screen.
- Confirm that the user has a CAS ID or Universal ID and obtain their universal ID username.
- Click “Add CAS User(s)” as shown in the image below.
- Type in the usernames you would like to add, one per line as shown in the example and press “create new accounts.”
- Select “people” from the administrative menu at the top of the screen.
- For each user you’ve added perform these two steps: find each username in the list and select “edit.”
- Add the appropriate role for the user, and select “save” at the bottom of the page.
- Ask each user you’ve added to log in and confirm that they are able to access essential functions (edit pages, update content, etc.) If they do not have access to the appropriate systems, please contact firstname.lastname@example.org for assistance.
Creating Accordion Menus
Accordion menus are used throughout our Drupal sites. Typically they appear on the left hand side and are used as department speficic menus. To utilize an accordion you must first creat a standard Drupal menu and then associate that menu with an accordion block.
- If no menu currently exists, create a menu by following steps 1-5 on the main Drupal site.
- Add links, if necessary to that menu.
- Navigate to Structure -> Blocks
- Click the “Add Menu Block” link at the top of the page.
- For the block title type in <none>
- For the Administatrive Name type in a name you will recognize. We recommend “Group Name Navigation.” For example, Architecture Navigation.
- For the menu to use, choose the menu you originally created.
- Choose 1st for the starting level.
- Click Save Block at the bottom of the screen.
- Locate an unused accordion menu block, often named something like Menu 2 (accordion)
- Click the Edit link on the right of the accordion menu block
- Configure the Accordion menu block. There are three configuration screens accessed by the menu on the left. Set the menu up like the following screenshots. Make sure to change the menu name to reflect your menu and choose your menu from the
- Click the “Save Block” button in the upper right region of the screen.
Creating a panel variant
Creating a panel variant
Panel variants are used to give different sections of your site specific content such as a unique menu or calendar. To successfully use this walkthrough, you will have wanted to create a menu for the new variant page and an accordion menu based on it.
Before you can create a panel variant you must Enable Modules.
- Select Modules
- Search the word “panels”
- Activate “Panel Nodes”
- Activate “Clean Panels Markup”
- Search for the word “Page Manager”
- Activate “Page Manager”
- Activate “Update Manager”
- Save Configuration
Creating a Panel Variant
- Select Structure -> Blocks –> Add menu block
- Give title such as “Site name interior menu”
- Under the Starting Menu Drop down select “2nd Level”
- Click the Advanced Options button
- Check make the starting level follow the active menu item.
- Check expand all children
- Save Block
- Select Structure -> Blocks
- Find Menu-1 Accordion and select “Configure” to the right
- Give name “Site name interior menu”
- Select your newly created menu block name under the “Menu Block Source” drop down
- Select the check box for both …a) Header Link b) Expand Menu
- Click Save
- Select Structure -> Panels -> Edit node template
- Select Content
- Select the gear in the upper left
- Select Miscellaneous
- Select checkbox on “Override Title”
- Select the gear on the right hand side of the newly created block
- Select Style -> System Block -> Save
Cloning a Panel Variant
- Navigate to Structure -> Panels.
- Click the Edit button next to Node Template.
- Click the clone button next to the title “Panel: Interior College Page.”
- Name the variant with a meaningful name. For example, if the variant is for the Accounting department name the variant as “Accounting Department.”
- Click Save.
- Click on “Selection Rules” from the menu on the left of the page.
- From the selection list select String: URL Path
- Click the Add button
- In the Paths field enter your department URL and then the same thing with a /* appended to the end.
- For example, with accounting it would look like accounting and accounting/*
- Next, click the menu item “Content” on the left hand side menu.
- Remove the existing Second Level Menu from the left column.
- Click the gear icon to the right of the pane title
- Scroll to the bottom and click remove
- Add in the department specific menu.
- Click the gear icon to the left of the word Left and choose Add Content.
- Click the word Miscellaneous and choose the accordion menu you have created.
- Leave the Override Title input blank and click the finish button.
- Click the gear to the right of the pane you have just added and click “Change” beneath the word Style.
- Choose “System Block”
- Click Next
- Click Update and Save
- Click Reorder Variants in the upper right corner of the screen.
- Drag your new variant above the Interior College Page variant or it will never be used.
- Click Update and Save.
Administering URL Aliases
Drupal pages are stored in a database. When we see a URL such as huxley.wwu.edu that page does not really exist on the filesystem. As such if a new page is created we have the ability to give it an alias meaning that a user can go to huxley.wwu.edu/alias. The alias is any part of the url after the first /.
wce.wwu.edu/secondary-education is an alias.
If you do not want to bother with setting up the alias by hand, feel free to leave the “Generate automatic URL alias” box checked. If you want to override the default, uncheck the box and then type in the new URL. You do not need to include the site domain name, such as huxley.wwu.edu or a slash to begin the URL.
- Always use hyphens – if you separate words, like in the screenshot above. Please do not use spaces.
- Use concise language so that the URLs stay short.
- Be consistent. If you are trying to group a set of pages together add that to the alias, such as spatial-analysis-lab/tuts/qgis
- Do not add suffixes to the alias such as .html or .shtml.
Creating a Sub Theme (for College and Department)
If your college or division has a Drupal site and you are working on integrating your site with the Drupal system a common need is site specific navigation and identity. To get this working we have a template named wwuzen-dual that you can modify to fit your site and we can then deploy within the parent site.
- Retrieve the theme from Bitbucket. This will download a zip file of the theme.
- Unzip the file.
- Rename the directory wwuzen-dual-(department/office name) without the ().
- Rename the file wwuzen_dual.info wwuzen_dual_(department/office name) without the ().
- Open the wwuzen_dual_(department/office name) file and find line 25.
- It should say name = WWUZEN Dual
- Change that to be WWUZEN (Department/office name) without the ().
- Open theme-settings.php and replace wwuzen_dual everywhere you find it with your theme name, wwuzen_dual_(department/office name) without the ().
- Do the same in template.php
- Open templates/page.tpl.php and put your department or office name on line 121 in place of “Department of Environmental Science”
- In the root directory of the theme you have just created compile the SASS into CSS. $ compass compile
- Create a new file called .gitignore and enter the line ‘*.scssc’ to exclude cache files from the repository.
- Send an e-mail to email@example.com and include your zipped up theme. Ask to have it loaded into your college or division Drupal site.
Once a theme is available in the appearance area of the Drupal site it needs to be configured for use with the specific department or office. This is a high-level description of the steps necessary. If you attempt the below but cannot find the links referenced you most likely need greater permissions. Please contact your site administrator to have your privileges elevated.
Enabling the theme
- Click Appearance in the admin toolbar
- Locate your theme, wwuzen-dual-(department/office name)
- Click enable. [Please do not click enable & set as default]
Configure the theme for use with your department/office
- Navigate to Configuration -> User Interface -> ThemeKey via the admin toolbar.
- Create a new rule for group:id. Set it equal to the department/office ID that you want the theme to affect. Then choose the theme.
- Click Save configuration
Creating a custom homepage for the department
- Navigate to the page you would like to be the homepage
- Edit the panel via the contextual link. (It looks like a gear)
- Clone the panel you have accessed and name it “Department Homepage” without the quotes
- Change the layout if necessary to one of the Western layouts
- Add in the panel elements required by the department
- A news block may be created using the feed aggregator
- Events need a view pane created by modifying the events view
- Save the panel variant
- Reorder the panel variant and put it just above the department variant
- Change the selection rule to apply only to the page you have deemed to be the homepage
- Modify the interior department variant selection rules to not apply to the homepage
Ensure the proper main menu is present
- Create an accordion menu for the main menu.
- Insert that menu in the navigation block region for the theme you have just enabled. Remove all other blocks in the navigation region if present.
- Click Save blocks
Change the banner image within your theme
Occasionally you may want to update the banner image on your website. To do so you will need to upload a properly sized image in place of the existing one. If you do not know what your theme is named please contact firstname.lastname@example.org for assistance before attempting the procedure below.
Create the banner image at the proper size
- Create an image 1060px wide and 130px tall.
- Save the file as a PNG or JPG file.
Install the Banner Image
- Navigate to Appearance -> Settings -> Your theme name.
- Within the logo image settings area click “Choose file” beneath the Upload Logo Image heading.
- Once you have selected the new banner image you created click open to choose it.
- Now click Save Configuration in the upper right.
- Reload one of your pages to verify the new banner looks correct.
Managing Broken Links
Link checker is enabled on your Drupal site. It constantly reviews the existing links on your site to make sure they still work. Once they run into an error, it is logged for you to adress.
Examining existing broken links
- First access the broken links overview screen. Navigate to Reports -> Broken Link
- Review the broken links. This is an example.
In the example above you can see on the far left the URL that is most likely broken, the next column gives us the HTTP error code, next is an explanation of the code and in the final column you can edit the node that has the error. Link checker will automatically update 301 errors to the proper URL after three attempts. The rest of the error codes need to be addressed by you manually.
The most common codes are 301, 404, 500, and 503.
Let’s fix the broken links
- First click the URL to make sure it is really broken.Sometime site owners have fixed the link since the link checker ran and there is really nothing to fix.
- If it is indeed broken, click the “Edit Node #” link on the far right. This will take you to page you need to edit. When the editing window opens you will see in yellow at the top of the page any broken links that exist on that specific page.
- In the above example, the first link is an issue because it returns a 404 (Page does not exist) error code. The other two, 301 codes, will be updated by Drupal itself over time.
- To fix the bad link select the text that contains the bad link and click the linkit iconand then update the link as appropriate. If there is no longer a good link to point too you may need to rewrite your content.
- Click Save at the bottom of the page and you will be redirected back to the LinkChecker results page to continue fixing broken links.
Drupal SiteBuilder Sessions
We try to meet weekly to learn new Drupal techniques, improve our processes, and solicit feedback from each other. Please find below links to the slides from each session as well as any related materials. They are in Open Document format created using LibreOffice. Word, and other common office programs should open them without issue.
Drupal Training Videos
- Creating Faculty Content: Adding a personal page to the Drupal site.
- Creating Taxonomy Terms
- Edit Basic Profile
- Edit Profile WYSIWYG
- Editing the Menu
- Faculty Uploading Media
- Media and Links
Finding the Node Id of a piece of content
Many tasks in Drupal require the use of a node’s “ID”, a unique integer that identifies a node in the database.
Using the URL
- If you are not logged in, please log in to your site by following the directions here
- Navigate to the piece of content which you’d like to get a Node ID for. For example, if we wanted the node ID for the “About The College” section of CHSS, we would log in and navigate to that page.
- Click “edit” to edit the content of the node (if possible.)
- Take a look at the URL in the address bar at the top of your browser for the NID (using this image as an example.)
- The node ID can be found in the part of the URL that reads “/node/NODEID/edit”, circled in the image above.
Adding “Add to Calendar” links to an event listing
This tutorial covers how to create a link that will appear next to all events in a view and, when clicked, will add the event to the user’s Outlook calendar, etc. In summary, you will be setting up two view displays: one of any desired type to show the events and links, and one feed display to “show” one event based on a contextual filter given in the URL. The first display will dynamically generate links to the second. These displays can be in the same view or in separate views.
Step 1: Enable required modules
You will need to enable the “Date iCal” module and it’s dependencies. These should be installed on all WWU Drupal sites.
Step 2: Create the feed display
- Add a feed display to a new or existing view that shows events.
- Under the “Format” heading, set “Format” to “iCal Feed”. For the format’s settings, check the boxes next to “Exclude Calendar Name” and “Disable webcal://”.
- Under the “Format” heading, set “Show” to “iCal Fields”.
- Add fields for each event’s title, date, and, optionally, body/description and location. In the date field settings, set “Display” to “Start date only”.
- In the settings next to “iCal Fields”, set the date, title, description, and location fields to the corresponding fields in the view.
- Under the “Feed Settings” header, give the display a path such as /%/feed.ics.
- Open the Advanced settings on the right, and add the contextual filter “Content: Nid”. Under the setting “When the filter value is NOT in the URL”, select “Display all results for the specified field”.
Now, when a user navigates to the specified path, they will encounter a .ics file, which will be opened using Outlook or a similar program. The file will contain data for the event whose NID is given in the URL where the “%” is in the path. The next view display creates links to the appropriate file by filling in each node’s NID.
Step 3: Create the event/link display
- Create or find a view that displays the events you want to have calendar links for.
- Add a field for each event’s NID (“Node: Nid”). In this field’s settings, exclude it from display.
- Add a custom text field (“Global: Custom text”). Make sure this field is below the NID field.
- In the settings for the custom text field, enter the text you wish to use as a link (e.g. “Add to Calendar”).
- In the settings, open the “Rewrite Results” tab, and check “Output this field as a link”.
- 6. In the “Link path” box, enter the value you entered for the feed display’s path without the leading slash and replacing the “%” with “[nid]”. For example, if the path for the feed display was /%/feed.ics, enter [nid]/feed.isc.
When the view is output, the “[nid]” string in the link path is replaced with each event’s NID, so the links lead to a .ics file containing that event.
Webform is the module for making fillable forms or surveys in Drupal. After a submission, users may be sent an e-mail as well as sending a notification to administrators. Results can be exported into Excel or other spreadsheet applications. Webform also provides some basic statistical review and has an extensive API for expanding its features.
Examples of use on campus are department specific forms, reviews, requests for books, and more.
Creating forms and adding components
After creating a Webform page/container at Content > Add Content > Webform, you will be presented with a screen for adding components, which can be accessed later via the “Webform” tab from the Webform’s page. Western’s Drupal sites are set up with one of two component configuration screens: the original, which appears as table with columns “Label”, “Type”, etc. with a widget to add new fields at the bottom, or a drag-and-drop “form builder” interface. This page will assume you are using the latter, but linked documentation may use the former. If Form Builder is not enabled on your site and you would like to enable it, contact Web Help.
Using the form builder interface, you can add components to your Webform by dragging the appropriate element from the right into the “Form preview” area to the left.
Common component configuration options
After a component has been added, hovering over it reveals an “x” icon in the top right corner to remove the component and a pencil icon that reveals configuration options.
A component’s Title appears above the component widget. The Description appears below the component and is used to provide guidance for filling out that component. Some components also have a “default value”, see Working with Default Values for more advanced usage.
Additionally, many components have checkboxes under the “Validation” tab for “Required” and “Unique”. Required means that a user must fill out this component in order to submit the form, and Unique means that a value may be used only once in that component. For example, if you have a component for a students W#, making it unique would ensure that the form is only submitted once per student (assuming submitters are honest about their W#’s).
Several content types can also be made “read only”, meaning that users cannot edit the value or “private” meaning that users can’t see the field unless they have access to the results of the form (this is useful e.g. if you are making an application form and want a staff/faculty member to go back and set a component to “accepted” or “not accepted”, see “Viewing and Analyzing Submissions” below).
Types of components
- Textfield – used for short textual data such as names. In the “Validation” tab, you can specify the maximum number of characters that will be accepted.
- Textarea – used for longer pieces of text such as short essays or comments.
- E-mail – used specifically for emails. Text entered in this field must be in the form of an e-mail address (i.e. ___@___.___).
- Number – for numeric data. Text will not be accepted. In the “validation” tab, you can specify the maximum and minimum number to accept, whether the input should be an integer, and which “steps” to accept (e.g. only accept multiples of 5).
- Radios – used when the user must make one choice out of several options. You can specify the options under the “Options” tab. This is also where you can choose which option is selected by default.
- Checkboxes – used when the user can choose multiple (or no) options out of several.
- Select list – an alternative to radios for when there are many options.
- Grid – used for answering several questions on a scale like a survey or instructor evaluation. You can edit the questions and available answers under the “Options” tab.
- Date – used specifically for dates. Data entered is guaranteed to be a date that actually exists, and you can specify the earliest and latest specified date in the “Validation” tab.
- Time – used specifically for times.
- File – used to allow the user to upload files e.g. for an application portfolio. You can specify the type and size of files accepted under the “Validation” tab.
- Hidden – a (text) field that is not displayed to the user, but does show up in results and can be included in emails sent when the form is submitted.
- Markup – plain text or HTML that displays in the middle of the form. It can be useful for providing instructions for the next several components.
- Fieldset – a container for several fields, which may be set to “collapsible” and/or “collapsed”, which may be useful if your form contains a large number of components.
- Page break – you can break your form onto multiple pages if it is long or complex. See Creating multistep webforms.
Configuring Conditional and Validation Rules
There are additional secondary tabs below the “Webform” tab that allow you to further configure the components in a Webform.
Conditionals: these are rules that affect the visibility and contents of one component based on the contents of another. See the Webform Conditional documentation.
Form Validation: these are more advanced rules for determining whether data entered into a component by a user is valid. See the Advanced webform validation with the Webform Validation module.
Reacting to submissions
User confirmation and controlling submissions
You can control what the user sees when they successfully submit a form under the “Form settings” tab. You can decide whether they are directed to a confirmation screen (and specify what text is displayed there), a specific URL, or the form.
Here, you can also control the number of submissions that a form receives by specifying a submission limit (note that the per user submission limit is determined using an IP-address, so may not be suitable for forms aimed at students who may be using computer labs) or closing the form, which blocks all further submissions. Additionally, in the “Advanced settings” section, you can change the text that appears in the form’s submit button if you would prefer it to say something other than “Submit”.
Under the “E-mails” tab near the top of the screen, you can specify e-mail addresses to send e-mails to when a user submits the form. You can use a specific address or an address given by the user to an e-mail, radios, checkboxes, or select list component. Using a radios/checkbox/select list component to specify the email address allows you to send emails conditionally, e.g. to a different adviser depending on the “area of study” the user chooses in an application form. If you choose this type of component, you will be able to enter the email address associated with each option on the next screen under “Component e-mail options”.
When add an e-mail you are taken to a screen where you can choose the subject and sender information for the e-mail. You will also see a template for the body of the e-mail containing some pieces of text contained in square brackets . These are called “tokens” and are replaced in the e-mail by the appropriate values. Here is a list of some useful tokens for if you want to write your own template:
- [submission:date:long] – The date and time that the form was submitted
- [submission:values] – The labels and submitted values of all components in the form
- [submission:url] – The URL of the submission on the site. Note that a person must have an account on the site to see submissions on the site
- [submission:values:*] – The value of a single component in the form. To use a component, replace the * with the component’s “form key” (in other tutorials, this may be called a “field key”), which can be found by editing a component in the component configuration screen, see screenshot below.
Viewing and analyzing submissions
On an existing Webform page, there is a “Results” tab beneath the form’s title. Here, you can see a list of all submissions to the form. Viewing a single submission shows the submitted values for all components in the form, including hidden, read-only, and private components. The link to a submissions “view” screen is created by the [submission:url] token. It is also possible to edit the values of the components in a submission, e.g. to mark an application as “accepted” or “not accepted”, and delete a submission entirely.
The “Analysis” tab next to the “Submissions” (list) tab provides some rudimentary analysis on the results, and the “Table” tab displays the component values for all submissions to the Webform in a table. Under the “Download” tab, you can download the submissions as a Microsoft Excel spreadsheet.
Under the “Download” tab, you can choose which components to export (“Included Export Components” section) as well as which submissions to export, determined by most recent, date range, or submission ID number range (“Download range options” section).
Modules we currently support
- Webform OG
- Webform Scheduler
- Webform Validation
- Webform Report
- MIME Mail
- Select or Other
- Options Element
Modules we plan to support in the future