Content Html

Using the Content Html content item, you can add simple content to your website anywhere you want through either the Simple or Advanced modes. In addition to the WYSIWYG functionality, you can switch to HTML mode to insert JavaScript to embed other sites, display web widgets, and use variables to create relative paths in Advanced mode.

Warning! Click Convert to Advanced Content to switch to Advanced mode. Once you have clicked Convert to Advanced Content, you cannot switch back to Simple mode.

Important! Due to the Content Security Policy (CSP), certain integrations from external websites, such as script imports of iframes, are not permitted on payment pages for credit card security purposes.

Notes

  • The Content Html content item does not support C# script blocks. If JavaScript cannot be used instead of C#, the C# code must be ported to a first class content type and a new content item must be created. For information on using redirects, see Content records.
  • The <form> tag cannot be placed on any page in RiSE, as every page already has a <form> tag enclosing all items on the page, and <form> tags cannot be nested inside one another.
  • The editor will automatically attempt to correct invalid and improperly formatted HTML, such as missing end tags, or unsupported tags and attributes. Note that according to HTML standards, some tags cannot be placed inside of others. For example, <div> tags cannot be placed inside of <span> tags.

    • Note: We recommend using an online validator tool to help correct or validate any errors.

  • Content added to an https web page using an <iframe> must match the protocol of the parent page. If the URL is invalid, cannot be found, or is insecure based on iMIS site protocols, the following will happen:
    • The iFrame content will not load.
    • Error messages will be displayed based on the relevant scenario:
      • The content can’t be included because the requested information can only be loaded on: [URL Entered] — The URL entered in the <iframe> cannot be loaded on a domain other than the original domain. 
      • The content can’t be embedded because the security protocols do not match. Frame URL provided — The embedded content is not secure (http), but was loaded in an https iMIS site.
      • The content can’t be embedded ([URL Entered]). Please verify the URL entered — The page cannot be reached. The page might be down, or the URL is invalid.
      • The content can't be embedded because the requested information has been moved for: [URL] — The page URL included within the <iframe> is being redirected to another location (server 301 redirect, permanent redirect).

Using the Content Html content item

Understanding the toolbar icons

Different toolbar options are available depending on whether you are working in Simple or Advanced mode.

Note: Once you have clicked Convert to Advanced Content, you cannot switch back to Simple mode.

Simple mode

Icon Function
Viewing the Bold, Italics, and Underline icons Bold, Italics, Underline
Headings, Font size
Viewing the Left align, Center-aling, and Right-align icons Left-align, Center-align, Right-align
Viewing the Indent, Outdent, Insert numbered list, and Insert bulleted list icons Indent, Outdent, Insert numbered list, Insert bulleted list
Viewing the Content Link Manager, Insert link (hyperlink, anchor, or email), and Remove link icons

Image Manager, Content Link Manager, Insert link (hyperlink, anchor, or email), Remove link

Note: You cannot paste images into the editor. You must upload images using the Image Manager.

Note: If you manually enter a link to an image that does not exist or an incorrect file path for an image, your content might not be able to be saved correctly. To ensure you do not have issues saving content that includes references to images, use the Image Manager to upload and manage image files.

Advanced mode

The following options are found in Advanced mode, in addition to the options found in Simple mode.

Icon Function
Viewing the Full screen mode icon Full screen mode
Viewing the Cut, Copy, and Paste icons Cut, Copy, Paste
Viewing the Find and replace, Spell check, Undo, and Redo icons Find and replace, Spell check, Undo, Redo
Font name
Viewing the Font color and Font highlighter color icons Font color, Font highlight color
Viewing the Insert table, Insert horizontal line, and Image Manager icons

Insert table, Insert horizontal line
Viewing the Insert new paragraph and Paragraph style icons Insert new paragraph, Paragraph style
Viewing Apply CSS Class, Insert symbol, and Format Stripper icons

Apply CSS Class, Insert symbol, Format Stripper:

  • Apply CSS Class - You can use the Apply CSS Class drop-down to apply styling and formatting to specific portions of the content. Select the area you want to style and select a CSS class from the drop-down.
  • Format Stripper - Removes any applied formatting. You have the option to select the type of formatting you want to remove from any highlighted content: All, Css, Font, Span, or Word.

 
Embedding external sites

To embed any external page into an iMIS site, you can use an <iframe>. Do the following:

  1. Go to RiSE > Page Builder > Manage content and create a new content record.
  2. Click Add content and add a single Content Html content item.
  3. Click Convert to Advanced Content. This cannot be undone.

    4. Warning! Click Convert to Advanced Content to switch to Advanced mode. Once you have clicked Convert to Advanced Content, you cannot switch back to Simple mode.

  4. Show the source by clicking the <> HTML tab, and type in an <iframe> tag: 
    <iframe width="100%" height="652" frameborder="0" src="//help.imis.com/"></iframe>

    Note: To avoid having content blocked (resulting in a Mixed Content error) do not include http: or https: in the src element.

  5. Go to RiSE > Site Builder > Manage sitemaps and create a new navigation item that points to the new content record.
  6. If appropriate, restrict the navigation item's Access Settings, such as to Authenticated User Full Control.
Inserting links

Do the following to insert a direct link to any content in iMIS or to an external site using the Content Link Manager:

  1. Create a new content record with the Content Html content item, or edit an existing record to insert a link.

    2. Note: If the content record you are working with is new, you must save the content record before you are able to upload a new downloadable document.

  2. From the editor toolbar, select the Content Link Manager icon:

  3. Choose a Link type:
    • Content or URL

      This link allows users to navigate to a separate web page. Do the following:

      1. Enter the Link text.
      2. Define the Content or URL:
        • Select content from the Document browser.
        • Enter a content record's direct path. For example, @/iCore/DefaultStaff.
        • Enter a shortcut URL. This will preserve the link even if the content is moved in the document system. The shortcut must conform to the format ~/Shortcut.
        • Enter a direct link. For example, http://www.help.imis.com.
      3. Enter a CSS class that will be applied to the link.
      4. If the Content or URL is pointing to a content record, select a Default website.
      5. Enter or select a Source code to associate this link with a marketing campaign.
      6. Enter Additional URL parameters to include in the link. To add multiple URL parameters, follow the format: 
        7. param1=value1&param2=value2&param3=value3
    • Downloadable document

      This link allows users to download a document. Do the following:

      1. Enter a link description for Link text.
      2. From Document, select the desired file. If the content record you are working with is new, you must save the content record before you are able to upload a new file.

        3. Note: To manage these files, go to RiSE > Page Builder > Manage files.

      3. Select the Link behavior:
        • Download – The file is downloaded to your computer.
        • Link in new tab – The opens in a new browser tab.

        4. Any file that cannot be opened in a new browser tab will download as before. The browser will open a new tab even if the file cannot be opened.

        Note: Certain document types will always download, even if you select Link in new tab. These document types vary by browser, platform and operating system.

      4. Click OK.
      5. (optional) Enter a CSS class for the link.
  4. Click OK.
Displaying web widgets

You can install and display JavaScript-based web widgets (plugins, gadgets) in your websites using the Content Html content item. A web widget is a small program that your users can execute within a web page and that can provide a wide range of functionality.

For example, Google Gadgets offers thousands of free web widgets including mini applications, games, news feeds, maps, and a wide range of other types of content. Many other websites also provide free widgets that can access data from their site. For example, X (Twitter) provides widgets that let you display X (Twitter)updates on your website. LinkedIn provides plugins that display information such as company profiles, member profiles, and links to share on LinkedIn. You just have to search the web to see what you can find that meets your needs.

Warning! Only embed widgets from authors you trust. Malicious code can damage your computer or violate your privacy.

Adding a JavaScript-based web widget to a web page

Do the following to add a JavaScript-based web widget to a web page:

  1. Go to RiSE > Page Builder > Manage content.
  2. Create a new content record or edit an existing one.
  3. Click Add content and add a Content Html content item.
  4. Click Convert to Advanced Content.
  5. Click < > HTML to switch to HTML mode.
  6. Copy the JavaScript embed code for the widget you want to add and paste it into the HTML area.
  7. Click OK, then Save and Publish your content record. The widget is displayed when that content record is rendered on a web page.
Creating relative paths using variables

The Content Html content item does not support the use of the ~/ (tilde slash) shortcut, often used to automatically build the correct paths when a control is rendered in different domains. However, several variables are available in this content item that allows you to enter paths for links and resources that are automatically resolved to various folders in your website:

  • [Website] and [@] – Both variables resolve to the root of the website and contain the website name. For example, [Website]Home.aspx resolves to http://example/Staff/Home.aspx.
  • [~] and [Root] – Both variables resolve to the root of the website. For example, [~]Home.aspx resolves to http://example/Home.aspx.
  • [Common] – Resolves to the AsiCommon directory of the website. For example, [Common]images/image.png resolves to http://example/AsiCommon/images/image.png.
  • [iMIS] – Resolves to the iMIS directory of the website. For example, [iMIS]images/image.png resolves to http://example/iMIS/images/image.png.
  • [Theme] – Resolves to the website’s theme folder. For example, [Theme]images/image.png might resolve to http://example/App_Themes/Orion/images/image.png. This variable can be used to access theme resources such as images and CSS.

Note: Images that use relative paths do not render in Design mode because the variable is not transformed until the content record is published. 

Content HTML variables

You can use a variation of HTML variables to surface information in a piece of content.

Below the available content variable examples:

  • ContentTitle - [ContentTitle]
  • MetaImagePath - [MetaImagePath]
  • UpdatedOnShort - [UpdatedOnShort]
  • UpdatedOnLong - [UpdatedOnLong]
  • UpdatedTimeShort - [UpdatedTimeShort]
  • UpdatedTimeLong - [UpdatedTimeLong]
  • CreatedBy - [CreatedBy]
  • UpdatedBy - [UpdatedBy]

Viewing content variable examples

Another example of a content variable is the following:

<strong>[ContentTitle]</strong> <img src="[MetaImagePath]"> <p> Last updated by [UpdatedOnShort] at [UpdatedTimeLong] by [UpdatedBy]</p>

User-defined content properties are also available for use in the HTML. To use user-defined content properties, review the following example:

  1. Go to RiSE > Maintenance > User defined fields.
  2. Create the new user-defined field, such as BackgroundImage and BackgroundImageAltText. Ensure you define default values for these fields..
  3. From a content record, click the Properties tab.

    4. Viewing the BackgroundImage and BackgroundImageAltText fields with default values

    Note: The User-defined Field value can be overwritten in the Properties tab of any given content record to display a value instead of the default.

  4. Enter a value for BackgroundImage and BackgroundImageAltText, such as /images/MyImage.webp and Wildflowers in summer.
  5. The BackgroundImage and BackgroundImageAltText property is now available for use in the HTML, for example: <img src="[BackgroundImage]" alt="[BackgroundImageAltText]">.
  6. When the content is displayed, you will see that the variables have been replaced with the values you set in the content properties. In this example, the defined image will display.

    7. Note: When replacement variables are used within a Content Area, they display the values for the content being viewed, rather than for the Content Area content. If the value of the property cannot be determined, then the variable is not replaced. When a new User-defined Field is added, each content record must be re-published before the default value is available.

Editing content through inline editing (simple mode only)

Note: Inline editing is not supported with Advanced mode.

When Easy Edit is enabled, pages containing Content HTML content items in Simple mode can be edited directly inline. Simply click the text or Edit button and begin making modifications. A toolbar appears that offers the simple mode toolbar functions.

When finished editing content inline, click Done then Save & Publish or Save & Submit for Approval, if you do not have content publishing permission.

To open the content item window, click Configure. You cannot edit the simple content from the Configure window, but you can perform the following:

  • Add a CSS class
  • Display a border around this content
  • Convert to Advanced Content – Switching to the Advanced editor will display the most recent inline content. If there are any unsaved changes, clicking Save or Save & Publish will overwrite those changes.