HowTo.mt.gov

Getting Started

Cascade Dashboard ExampleCascade CMS from Hannon Hill is a content management system that empowers users to create, publish, and manage digital content.  Cascade CMS is a content management system built for everyone. It's the balance of ultimate flexibility enabling fast development with easy-to-use functionality for non-technical contributors that makes Cascade CMS really special. Their goal is to give everyone at our organization the tools they need to build high-performing websites with fresh and impactful content.

Explore Cascade CMS

Features

Product Demonstration Webinar

Simple Content Entry Wizards

Enter content through either simple WYSIWYG editors or structured fields like file choosers, checkboxes, drop-down boxes, and text fields.

Proactive Quality Control

Check for broken links, spelling errors, and accessibility violations prior to publishing your content to the live site.

Customizable Dashboard

Tailor your dashboard by adding widgets such as history, broken link report, stale content report, inbox, workflows, drafts, or locked assets.

Super Easy Content Reuse

Share content across multiple pages and multiple sites, both automatically and manually. No CMS makes content reuse easier than Cascade CMS.

Content Health

Cascade CMS can alert users and site administrators of pages that have not been updated in any number of days, weeks, months, or years. Use the daily content report, task manager, and content review dates to keep content fresh.

Native Image Editor

Use the native image editor to rotate, resize, crop, edit, and make other changes to your graphics and illustrations.

Version Control

Keeps 20 versions of your pages, compare them, and roll back to a previous version with just one click.

Support for XSLT and Velocity

Cascade CMS supports both XSLT and Velocity for writing formats. Even use both on the same page. Incorporate built-in tools to harness content and do more with less code.

Advanced Code Editor

The Advanced Code Editor is a built-in syntax-highlighting editor for a variety of languages, auto-indentation and auto-formatting, code folding and code snippets.

Rendering Metrics

Check rendering times for each region on your page, helping you better target and identify those regions that can be further optimized.

Site Import and Export

Maximize content portability by transferring your production site to a development instance with just a few clicks.

Site Copy

Create a new site based off a template site within less than a minute.

Assume Identity

For Administrators, you can Use the Assume Identity Feature to see exactly what a specific user sees and quickly troubleshoot issues.

Multi-Site Management

Manage as many Cascade CMS sites as you need from the same instance. Create site specific user roles, share content across multiple sites, and publish to specific destinations and servers.

Robust Permissions

Apply permissions on sites, directories, page types, individual pages, specific regions on a page, and even individual content entry fields.

Training Videos

Documentation

Internal Links

These are links to content that exists within Cascade. You can link to documents, files and pages. Anchor links are also considered internal links.

  1. Select the text that you want to add a link to and Click the  Insert/edit link button in the WYSIWYG toolbar. Insert Link Icon
  2. Click Choose File, Page, or Link option to navigate to the appropriate asset. Once you have located the asset to which you wish to link, click Ok button. Link-Chooser.jpg

Anchor Links

An Anchor link is an invisible bookmark on your page. When pages have a large amount of text, such as an FAQ page, it is easier to break up the page using anchors.

  1. Place your cursor in your text where you want to add an anchor and Click the  Anchor button in the WYSIWYG toolbar. Insert Anchor Icon
  2. In the Id field, type a short name for your anchor, click  Ok. Use dashes instead of spaces for longer ids. Anchor ID.
  3. You will now see a small anchor image where you have placed your anchor. This anchor image is only visible within Cascade – this image will not appear on the published page. Anchor Icon
  4. Select the text that you want to add a link to and Click the  Insert/edit link button in the WYSIWYG toolbar. Insert Link Icon
  5. Type the anchor name into the Anchor field, click  Ok. You may use this for the page you are currently editing, or a page elsewhere on your site. If you wish to add an anchor to another page on your site, first choose the page you will link to (as described above). Then, type the appropriate name into the Anchor field. Anchor Link

External Links

External links are links to pages that are not part of your website in Cascade. If you cannot link to a page via Cascade using the folder tree, it’s considered external. Linking to an email address is also considered an external link.

  1. Select the text that you want to add a link to and Click the  Insert/edit link button in the WYSIWYG toolbar. Insert Link Icon
  2. Under Link Source check the  External checkbox. In the Link field, type or paste the external website URL (make sure that the URL starts with http:// or https://), click Ok. Link External

Email Address Links

  1. Select the text that you want to add a link to and Click the  Insert/edit link button in the WYSIWYG toolbar. Insert Link Icon
  2. Under Link Source check the  External checkbox. In the Link field, erase http:// and type mailto: followed by the email address, click Ok. Link Email
  3. If you want to automatically set the subject of the email, add this to the end of it (use %20 between words instead of spaces): ?Subject=Library%20Information

Most of the Cascade sites are using the Bootstrap 3 framework, so any helper classes from their documentation will work on your site.

Most of the Cascade sites are setup to use Font Awesome 5, you can find the list of their free icons here.

  1. Click the Insert/edit image button in the WYSIWYG toolbar. Choose the image and enter Image Description (alt/text) per usual.
    WYSIWIG Insert Image
  2. Under the Advanced tab, check Use Figure/Caption checkbox and click OK.
    Caption Option
  3. You will now have a caption field below the image. Highlight and change the image caption as you wish.
    Image Caption Text
  4. Now highlight the whole caption box around image (a thin blue line appears around it and the word Figure appears in bottom left), go to Formats > Custom and select one of these: Caption-Center, Caption-Float-Left, Caption-Float-Right options.
    Custom Formats for Captions

There is a built in Custom Format option that you will want to use for pretty much any image you put in a WYSIWYG unless it is a small image. This class helps the image to scale down on all device sizes.

  1. Click the Insert/edit image button in the WYSIWYG toolbar. Choose the image and enter Image description (alternative text for screen readers) per usual.WYSIWIG Insert Image
  2. Choose the Image: Fluid Center or Image: Fluid Left option in the Custom Formats section.Fluid Custom Format

You will notice that the Content field looks similar to other word editing programs such as Microsoft Word. In web editing, this is called a WYSIWYG (pronounced WIZ-zee-wig) editor. It stands for "What You See Is What You Get". Given that you will recognize many of the buttons used in the WYSIWYG editor, we will only go over the ones that are unique to web editing.

wysiwyg

Cut/Copy/Paste

These options can be found under the  Edit dropdown. You may also use keyboard shortcuts:

copy ctrl+c
paste ctrl+v
cut ctrl+x

Paste as Text

When you attempt to paste text from an outside application, the text can carry hidden web code. To remove this code as you paste, use the Edit > Paste as Text option. This will ensure that all pre-existing formatting is removed. Although this button will eliminate many future problems, it removes all formatting. This means that any bold, italic, underlined, or linked words will appear as plain text. You will need to manually add format options to your text.

Superscript, Subscript

These formatting options are located under Format dropdown. To apply these styles, simply select the text and then select the style.

Apply Headings

Headings can be used to create a structure for search engines and visual hierarchy on the page. To apply headings, select the text, go to Format > Formats > Headings and then select the heading you wish to apply. WYSIWYG Headings

Site Analytics

Google Analytics Installation 

The State of Montana is moving to Google Analytics*. Below is the code and documenation to add Google Analytics 4 (GA) to your Cascade site, an end-user Cookie Consent Notice page and a Cookie Acceptance Modal. You are required to add in the Modal and End User page when installing GA.  

Need assistance installing GA4 on your website? Complete the Angelfish Analytics Migration spreadsheet and attach it to a new Service Now ticket. The ADO web team will work with you to get GA4 set up on your website.

*Angelfish Analytics is sunsetting on November 1, 2023, please download any data you would like to keep a record of before that date.

Google Search

Google Programmable Search

Turning on Search: You can control the use of the Search box on your site w/ the settings in the Set-Up-Block on your site.  In order for this search to work, you will need to setup your site in the Google's  Programmable Search console to obtain an ID or request us to setup one for you w/ a case to the service desk.

Ad Removal: If you are using the built in google search, you will want to request ads to be removed from the search results with this form for each site using search.

Google Search Console

Using the  Google Search Console, you can submit sitemaps and request crawls to clean up any link changes or meta keyword/descriptions adjustments.  If you site recently changed from HTTP to HTTPS, there is information about adding this https version of the site as a new profile in your Search Console.

 

Developers

ServiceNow Virtual Agent

HTML

  1. Navigate to /_cascade/blocks/static/
  2. Add Content > Default > block
  3. Choose xml as the block type
  4. Name it chat & add below code:
<system-xml>
<iframe class="collapse" height="650" id="sn_va_web_client" src="https://montana.servicenowservices.com/sn_va_web_client_app_embed.do?sysparm_branding_key=doa&amp;sysparm_skip_load_history=true" title="ServiceNow Virtual Agent Client" width="350"></iframe>
<button aria-controls="sn_va_web_client" aria-expanded="false" class="btn btn-circle" data-offset-bottom="64" data-spy="affix" data-target="#sn_va_web_client" data-toggle="collapse" id="chat-button" title="Chat" type="button">
<i class="fas fa-comments"></i>
</button>
<div id="chat-greet">Hi, I can help answer your questions!</div>
</system-xml>

CSS

  1. Navigate to /_files/css/styles.css
  2. Edit the file to add this CSS below the footer section:
/********************************** CHAT **************************************/
#chat-button, #chat-greet, #sn_va_web_client {
position:fixed;
right:10px;
bottom:10px;
z-index:9999;
background:#4169e1;
color:#fff;
}
#sn_va_web_client {
margin-bottom: 80px;
}
#chat-greet {
margin: 0 85px 17px 0;
padding: .375rem .75rem;
border-radius: .25rem;
}
.btn-circle {
width: 70px;
height: 70px;
padding: 10px 16px;
border-radius: 35px;
transition: all .5s;
text-align: center;
font-size: 35px;
line-height: 1.33;
}
#chat-button[aria-expanded="true"]{
border-top-left-radius: 0;
}
#chat-button[aria-expanded="true"]:before {
content: "\f00d";
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
#chat-button[aria-expanded="true"] i{
display:none;
}

TEMPLATE

  1. Navigate to /_cascade/templates/Page
  2. Edit this file to add <system-region name="CHAT"/> below the footer region & Save
  3. Edit the file again, click on the Configure tab
  4. Scroll down to the Chat region, click the block field and choose the chat block. & Save
  5. If you have more than one page template on your site, you will need to repeat for all page templates.

PUBLISH

You will then need to publish your whole site, or just the _cascade & _files folder.

Other Resources