Site Map

The Common Framework (CFW) is a set of functionalities and styling built using Drupal to implement websites with shared elements across Maricopa environments. It's primarily used for the nine college websites and www.maricopa.edu http://www.maricopa.edu.

An accordion menu is a vertically stacked list of headers that can be clicked to either reveal or hide content associated with them. It is one of many ways you can expose content to users in a progressive manner. See an example of this content type https:

https://preview.uxpin.com/29099182adba5877431fb9e35e86b5dd9585c83c#/pages/149361665/simulate/no-panels?mode=cvhidm https://preview.uxpin.com/29099182adba5877431fb9e35e86b5dd9585c83c#/pages/149361665/simulate/no-panels?mode=cvhidm

To add elements/fields to your form click "Add element". worddavc2e158188796ba0856f2502a25fcd550.png Note: The term element is used instead of a field in Drupal webform worddav427f79edd81f31e93e69a41666c4b018.png Under select an element on the "Filter by

worddavb55b186bdcfd8e3db8278d5bcfe835bb.png Captcha provides a form element that determines whether the user is human After adding the CAPTCHA element, you can set the Challenge type drop down to reCAPTCHA. Add the Webform to a page either via manually pl

The ASSIST Chatbot Block is a block that can be placed on a page to enable chatting with students visiting the website. Instructions Creating a ASSIST Chatbot Block You will need the following ASSIST to create your form: Amazon Connect (required) - this i

An Announcement on an Award is placed via the Announcement text area at the top when you edit an Award page. You can have only one Announcement per Award. Instructions Adding an Announcement Edit the Award page you wish to place the announcement on Enter

Award links to a Program pages are placed either via block structure, or with context depending on your college set up. See an example Award with a link to Programs (login: Maricopa / Maricopa) Some awards are associated with multiple programs and will ha

We have created an awards report to help you manage your awards. This report consists of a page (admin/reports/program/award) and a weekly email summary. It’s meant to provide several tools to help you understand the state of all the awards on your site.

worddavce6bcf5dc1daaa41b9221c195b176a59.png Checkbox provides a form element for a single checkbox Hidden provides a form element for an HTML hidden input element Textarea provides a form element for the input of multiple line text Text field provides a f

Basic Pages allow you to build rich and robust web content. There are several layout options available (called paragraph bundles) to help you create interactive and responsive webpages. This content type is generally used to create largely static content

This section contains special build blocks to provide the ability to build special content. Blocks are boxes of content that can be displayed in regions on a page. You can adjust position and which page or pages the block appears on. Instructions Blocks a

Chrome Firefox Edge Safari IE Android (5-11) supported supported N/A N/A N/A iOS (11-15) supported supported N/A supported N/A Mac (Mojave-Monterry) 60-97 60-96 80-97 12-15 X Windows (7-11) 60-97 60-96 80-97 N/A X

The build page allows you to add elements, pages, or layouts worddav5987497d438cd5112e260a864180cfd4.png It allows you to edit an existing form by adding a new element, a page, or a layout. worddav9542449d92a5233794873468e0e312a2.png Under the operations

worddav502982336f1d10ecc99120888f3e2e0c.png Submit button(s) provides an element that contains a Webform's submit, draft, wizard, and/or preview buttons

Card sets are full of interactive elements such as text, links, buttons, or images associated with a singular thought/action. See an example of this content type https://drupal.maricopa.edu/paragraph-bundles/landing-page/cards Adding a Card Set From the p

The Common Framework uses roles to manage site access as opposed to individual permissions. Below is a high-level overview of the roles available in the Common Framework. For questions about access, access requests, or to request additional training, cont

Image size for CFW3 is located in the chart below. Refer to the CFW3 image chart when preparing images for a website. CFW3 Image Size Chart Image Field Paragraph Bundle Minimum Dimensions Maximum Dimensions Image Aspect Ratio Size Image Style field_event_

As of 11/1/2023, CKEditor 5 is now what is installed in all Drupal sites. CKEditor 5 is a widely-used WYSIWYG text editor tailored for web applications. When incorporating CKEditor 5 with content management systems like Drupal, understanding its interacti

You can build HTML/CSS code templates for Marketing to place on pages throughout your CFW3 college site. These code templates will work with both basic and landing pages. Below are sections to different code templates where you can configure this content.

Below are code templates for adding college contacts throughout your CFW3 college site. These code templates will work with both basic and landing pages. Copy and Paste the below code into the CKEditor screen to create the below code templates. 2022-12-06

worddavf4baf1b8d6f9771ded0287fe4439e46b.png Address provides a form element to collect address information (street, city, state, zip) Contact provides a form element to collect contact information (name, address, phone, email) Custom Composite provides a

The Contact Info content type is a block that appears on Basic Pages in the left-hand sidebar below the navigation menu. Multiple contact info paragraphs can be added and the order they appear can be arranged as desired. Only a single Contact Info needs t

worddava9cae144942298cd14f6815baa9fde99.png Container provides an element that wraps child elements in a container Details provides an interactive delement that a user can open and close Fieldset provides an element for a group of form elements Flexbox La

In this section you will find information to help use the content editor tools available. Text formats will help you know things like what HTML tags are allowed. CKEditor 5 provide help on using the WYSIWYG editor. Images provides an overview of all image

Here are the list of content types (CT’s) available:

Navigate to Webforms > Forms then click Add Webform worddav01bbc1fe0186ed7c174393c60ca2f691.png A window will pop up to add a webform worddav2e6a798d21dc4c17e28f67c9c88f91c2.png Give your form a title/name & description, choose a category, and set the sta

worddav5b45f970cb7a67a492db139da1e0b8c9.png Conditional logic can be used to show or hide elements, disable them or make them required, depending on the state of other elements. It's always worth testing that the logic performs as expected, especially for

There are many ways to create content in the CFW3. Most start with a content type, then you use fields to add specifically what you need. There is also blocks (normal and custom). Some can be added by editing existing content (like programs, awards, field

Custom Blocks can be added via the Paragraph Builder on the Front Page, Basic Page, and Landing Page content types. Blocks are boxes of content that can contain text that only needs written once and be placed in multiple locations. When the block is updat

Custom block types are like mini content types, as we can add fields to them for specific purposes. These are the ones that currently exist: Alert Basic block Image Video Alert Alert blocks provide an area to add text and a selector to choose the “backgro

A custom program is one that only exists on a college website. They do not map directly to an official award. Such programs will appear with an asterisk that indicates they do not offer an award, and they are designed for personal and professional enrichm

This article is about how to customize field of interest pages on your college website. See an example field of interest page (Login: Maricopa / Maricopa). Instructions Customizing a Field of Interest Page In the Admin Toolbar navigate to Content > Fields

worddav5bd801b7c74e8c3aa9cdb9f55e8d5c52.png Date provides a form element for date selection. Date/Time provides a form element for date & time selection Date List provides a form element for date & time selection using select menus and text fields Time pr

Here you will find notes/solutions/etc about using a DFW instance in private/public config. Azure Authentication Employees must log in to view private pages in DFW. Login authenticates against the Azure web application, which controls user access. You wil

Elements are the fundamental building blocks of your form. Use the elements page to add, edit, duplicate, and delete elements from your form.

Email From and Reply-to The From email option under the Send from (website/domain) accordion has been removed as it will always resolve to mcccd.web@domail.maricopa.edu. You can still edit the From name as Gmail does not interfere with this setting. Pleas

An Event Collection is type of landing page used to promote related events. After an Event Collection page has been created, individual Events can be added to the page by associating an Event with its related Event Collection. Associated events are displa

Many colleges use events to promote local activities intended for a public audience. Occasionally, a college might want to inform their users whether an event is online, in-person, or hybrid. Below, we explain how to add an "Event Location" taxonomy term

Event Tags can be used to specify Event Locations or Event Categories on an Events page. Here's a guide to customizing your Event Tags. For additional information on creating an event, please refer to the Events article. Customizing an Event Tag Events Ta

Many colleges use Events to promote local college events intended for a public audience. The most recent three Events you’ve created will also populate your college’s homepage. See an example of this content type https://drupal.maricopa.edu/events/dug-mee

The FA Chatbot Block is a block that can be placed on a page to enable chatting with students visiting the website. Instructions Configuring the FA Chatbot Block module Go to Configuration > System > Financial Aid Chatbot Block or navigate to /admin/confi

Facebook Sharing is a simple way of letting people bring content from your website or mobile app to Facebook. Sharing is triggered when someone clicks a social plugin like the Share or Send button. This launches the corresponding Share or Message dialog.

The FATV Chatbot Block is a block that can be placed on a page to enable chatting with students visiting the website. This module is being replaced with the new fa_chatbot_block module. FA Chatbot Block Instructions Creating a FATV Chatbot Block Go to Str

See an example of this content type https://drupal.maricopa.edu/paragraph-bundles/basic-page/file-form-link Adding a File Form-link Table From the paragraph builder select the button labeled Add File Form-link Table. Enter the title for the File Form-link

FOI, Program, and Award Pages Important Terms Fields of Interest A Field of Interest organizes awards into similar areas of study to help students clarify a career path they are interested in and represents a community of students, faculty, and staff. To

The footer menu lives at the bottom of your website – site wide – and consists of links, social icons, and an athletics logo. See an example of a Footer Menu 2022-06-06_13-45-49.png Creating Footer Menu Links Go to Structure > Menus > Footer Select Add Li

The Front Page is the content type used to build your website’s front page. You will only have one of these on your website, so you can only ‘edit’ the one that already exists. There are many layout options available (called paragraph bundles) to help you

From top to bottom, the first element on the homepage is the Frontpage feature. This is the carousel that runs in the homepage banner. See an example of this content type Instructions Go to Content > Add content > Frontpage Feature Add a Title, which can

The boxes of content that appear under the top banner on your homepage are called Frontpage Promos. Similar to the Frontpage Features, the promos include an image, title, and blurb, but everything appears much smaller on the page. See an example of this c

See an example of this content type https://drupal.maricopa.edu/paragraph-bundles/basic-page/image Adding a Full Width Image From the paragraph builder select the button labeled Add Full Width Image Enter the title for this Full Width Image in the Title f

See an example of this content type https://drupal.maricopa.edu/paragraph-bundles/basic-page/video Adding a Full Width Video From the paragraph builder select the button labeled Add Full Width Video Enter the title for the Full Width Video in the Title fi

https://docs.google.com/forms/d/e/1FAIpQLSe-arqe6AHnxaxrSBBCclVjnIfqNeyxC_hZ7S9xelERrvg8bg/viewform https://docs.google.com/forms/d/e/1FAIpQLSe-arqe6AHnxaxrSBBCclVjnIfqNeyxC_hZ7S9xelERrvg8bg/viewform Add info here about how to fill out form Getting Access

We will be adding documentation here about making the various graphics on the site. Frontpage features Frontpage promos Banner images Hero images Full width images Slideshows ???

There are a lot of features in CFW3 where you can add, remove, and rename menu items. You can also configure a special header and footer where you can specify the college’s logos, social media and contact information. Below are three sections where you ca

The main menu lives at the top of your website – on the header – and consists of primary and secondary links. See an example of a Main Menu 2022-06-02_12-30-27.png Creating Main Menu Links To add a menu item to your primary links, complete the following s

In CFW3 you can add a custom Dropdown Menu called Header quicklinks. If links exist, this menu will be built into the main menu, on the far right hand side. Below is how you can configure this menu. See an example of a Header quicklinks menu quicklinks.pn

The Top Menu (or utility bar) menu for global links. On desktop it the first element and on mobile its the last menu element. Creating Utility Menu Links To add a menu item to your utility bar, complete the following steps: In the admin menu, click Struct

A horizontal website navigation bar is a list of links at the top of each page. It may be above, below, to the left or to the right of the header or logo, but it is always placed before the main content of the page and is consistent on every page. See an

To request access, us the following form: https://docs.google.com/forms/d/e/1FAIpQLSdjYtOrtb-GpTN1g9RbSUd8CPT_p6U0SyFFWZLc6YHzgjUYhQ/viewform https://docs.google.com/forms/d/e/1FAIpQLSdjYtOrtb-GpTN1g9RbSUd8CPT_p6U0SyFFWZLc6YHzgjUYhQ/viewform How to Get Ac

Once you have been granted site access, you can login and start making changes to your website. Instructions Go to [site address]/login. For example, drupal.maricopa.edu/login https://drupal.maricopa.edu/login Check the box next to I’m not a robot, and cl

A call-to-action (CTA) is a button that prompts your visitors, leads, and customers to take action. See an example of this content type https://drupal.maricopa.edu/paragraph-bundles/landing-page/image-and-cta Adding Image and CTA From the paragraph builde

See an example of this content type https://drupal.maricopa.edu/paragraph-bundles/landing-page/image-and-stat Adding Image and Stat Block From the paragraph builder select the button labeled Add Image and Stat Block Enter the title for this Image and Stat

Text block enables you to put images and written content side by side. See an example of this content type https://drupal.maricopa.edu/paragraph-bundles/landing-page/image-and-text Adding Image and Text Block From the paragraph builder select the button l

The Jobs Block is a custom block that can be placed on a page to show job listings from HCM data. This module is enabled on a per site basis. Contact the ITS Web Team to enable this functionality. Create a custom Jobs block Go to Content > Blocks > Add co

Purpose and Use This Knowledge Base is a tool for web staff and web editors of Colleges on the Common Framework. Drupal.Maricopa.edu http://drupal.maricopa.edu/ shows you what the Common Framework looks like, and this Knowledge Base shows you how to build

Landing Pages have enhanced functionality to help you build beautiful web content. There are many layout options available (called paragraph bundles) to help you create dynamic webpages. This content type is generally used to promote marketing campaigns a

Once you have been granted site access, you can login and start making changes to your website. Instructions Go to [site address]/user. For example, Drupal.Maricopa.edu/user http://Drupal.Maricopa.edu/user Check the box next to I’m not a robot, and click

Degrees and certificates are pushed to your website from a central repository that house all the awards for the district. Your college’s only responsibility is to be the final gatekeeper for what awards get published and deleted from your website. You can

Programs are pushed to your website from a central repository that house all the programs for the district. Your college’s only responsibility is to be the final gatekeeper for what programs get published and deleted from your website. Instructions Identi

The Center for Curriculum Transfer and Articulation (CCTA) is responsible for creating and deleting Programs and adding awards to Programs in the Academic Warehouse https://warehouse.maricopa.edu/. They are also responsible for updating program names and

This is for getting access to the Maricopa CDN, which is restricted to people upload documents form www and District web sites. You will need to submit a helpdesk ticket to reset your password for access on cdn.maricopa.edu http://cdn.maricopa.edu/. You s

worddavb2e65f09258a477f0fb32e1844dabd81.png Advanced HTML/Text provides an element to render advanced HTML markup and processed text Basic HTML provides an element to render basic HTML markup Horizontal Rule provides a horizontal rule element Label provid

The Masonry Gallery is a JavaScript grid layout that allows you to display a collection of images. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You can also click on eac

MEMS stands for Maricopa Emergency Management System. The MEMS role in the Common Framework can publish a MEMS alert that appear at the top of each page site-wide. There are three settings of alerts, from low-level events like a campus closure to higher-l

Many colleges use News to promote local college stories intended for a public audience. The most recent three News items you’ve created will also populate your college’s homepage. See an example of this content type (@TODO) Instructions Go to Content > Ad

worddav1d8190ee9c2df74eb4e0039aa5a5240c.png On the webform homepage under the operations column, the drop-down allows you to view, build, test, access the form settings, and check the results of your form. You can also duplicate or delete a form. worddav2

worddav84c7a334f52e7e8b949cf7317f7719a9.png Checkboxes provides a form element for a set of checkboxes Checkboses Other provides a form element for a set of checkboxes, with the ability to enter a custom value Likert provides a form element where users ca

Describe Paragraph Layout Builder field @TODO: Add common elements here and refer back to them on subpages (like title, title alignment, horiz bar)

Popovers are similar to tooltips. When a user clicks on an element, a pop-up box appears. The difference is that popovers can contain much more content. Refer to the below URL for more information on Bootstrap Popovers. https://mcccd-web.github.io/docs/5.

A program is an area of study in which students can specialize in. Most programs lead to one or more degrees or certificates (also known as pathways). Examples: Construction Trades, Education, Dance, Chemistry, Storytelling, or Spanish. Other programs are

The Qless Block provides a way to place the current status and wait times for your college’s kiosks in a table format on a page. The information is dynamically fed to the block with each page load or refresh. See an example Qless Block https://drupal.mari

The Related Resources content type is a block that appears on Landing and Basic Pages on the right-hand side bar region of the page. These blocks are used to provide additional resources in the form of URLs to support the content of the page. See an examp

From the results page you can view the values of the submitted form, submissions can be reviewed, updated, flagged, and/or annotated. worddav62cd8688694675775e3551bd85396c01.png There are 4 (four) options under the result tab (Submissions, Download, Uploa

The RFI Form Block is a form that can be placed on a page to collect basic information from prospective students. This information gets fed into MCCCD’s D365 CRM system. You can use this form throughout your site as needed. You cannot modify the fields on

The Common Framework uses roles to manage site access as opposed to individual permissions. Below is a high-level overview of the roles available in the Common Framework. There is also a detailed list of Common Framework roles and permissions https://docs

There are 6 (six) options under the settings tab (General, Form, Submissions, Confirmation, Emails/Handlers, Access). worddav35576773ce3ab0675081850b04e6671b.png General The General settings page allows a webform's administrative information, paths, behav

The Sidebar Block content type is a block that appears on Landing and Basic pages in either the right-hand or left-hand region of the page. These blocks are used to provide additional functionality that Related Resources and Contact Info do not offer. You

The Slide - Coverflow style is a 3 dimensional slideshow with a pagination navigation at the bottom to transition between slides. It has an Autoplay feature and you can set the Autoplay Delay timeframe between slide transitions. coverflow.png Adding a Sli

The Slide - Full Width style is a 100% width slideshow with a pagination navigation at the bottom to transition between slides. It has an Autoplay feature and you can set the Autoplay Delay timeframe between slide transitions. full-width.png Adding a Slid

The Slide - Slides Per View style is a series of three images displayed in view at the same time within the slideshow. It has an Autoplay feature and you can set the Autoplay Delay timeframe between slide transitions. slides-per-view.png Adding a Slidesho

The Slide - Thumbs style is a thumbnail slideshow with a thumbs navigation at the bottom of the main image to transition between slides. It has an Autoplay feature and you can set the Autoplay Delay timeframe between slide transitions. thumbs.png Adding a

The Slideshow is the most modern touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in any landing page within your college’s Drupal site. Adding a Slideshow Container See examples of all four slidesh

The Smart Date field is part of a the Smart Date module. The modules documentation is available on the Drupal website https://www.drupal.org/docs/contributed-modules/smart-date https://www.drupal.org/docs/contributed-modules/smart-date. The screenshot bel

Social media integration can be considered a way of extending your website by redirecting your social media followers to your college website and making your social platforms more accessible to the students. Facebook Sharing

A Success Story is used to add a student to the site for highlighting in a testimonial OR on an alumni like page(s). These stories serve as ‘stock’ like content to be used on other pages throughout the site. They are not tied to a specifically viewable pa

A tab is a clickable area at the top of a window that shows another page or area. See an example of this content type https://drupal.maricopa.edu/paragraph-bundles/landing-page/tab-set Adding a Tab Set From the paragraph builder select the button labeled

The Term Event Block Embed is a block that can be placed on a page to display news of a selected Event Category. Events by Category Block The Events by Category block is a custom block that displays events from a selected event category. The Event by Cate

The Term News Block Embed is a block that can be placed on a page to display news of a selected News Category. News by Category Block The News by Category block is a custom block that displays news articles from a selected news category. The News by Categ

worddav26b98e474e365a522f1480c4fce37e23.png The test page allows you to test the webform created. The fields form values are auto-filled with random values.

Testimonials automatically pull the Full Name, Photo, and Testimonial fields from a specific Success Story. A testimonial can be added via the Paragraph Builder on the Front Page, Basic Page, and Landing Page content types. See an example of this content

See an example of this content type https://drupal.maricopa.edu/paragraph-bundles/landing-page/text Adding Text From the paragraph builder select the button labeled Add Text Enter the title for this Text Block in the Title field. Select Title Options and

Text formats are composed of a series of filters and change how HTML tags are processed and displayed on your site. When a user creates content, the text format is associated with the content, and the full, original text is stored in the database. The con

Tile sets are full of interactive elements such as text, links, and icons associated with a singular thought/action. See an example of this content type https://drupal.maricopa.edu/paragraph-bundles/landing-page/tiles Adding Tile Set From the paragraph bu

Bootstrap Tooltips are often used to specify extra information about something when the user moves the mouse pointer over an HTML element. Refer to the below URL for more information on Bootstrap Tooltips. https://mcccd-web.github.io/docs/5.2/components/t

The Transfer Partners Block is a custom block that can be placed on a landing page to show transfer partner listings. This feature is enabled on a per site basis. Contact the ITS Web Team to enable this functionality. Configure your Transfer Partners bloc

Blocks are boxes of content that can be displayed in regions on a page. You can adjust the size, shape, appearance, position, and which page or pages the block appears on. To use add blocks to an entire section, please use the Sidebar Blocks content type.

Text block enables you to put videos and written content side by side. See an example of this content type https://drupal.maricopa.edu/paragraph-bundles/landing-page/video-and-text-block Adding a Video and Text Block From the paragraph builder select the

worddava73074668e4d99742575bcbd5a2ec369.png The View page allows you to view the webform created.

Step-by-step instructions guide on how to create and build a webform.