Modern Campus Catalog Emblem Modern Campus CMS Emblem Modern Campus Curriculum Emblem Modern Campus Involve Emblem Modern Campus Lifelong Learning Extended Education Emblem Modern Campus Message Emblem Modern Campus Navigate Emblem Modern Campus Schedule Emblem Modern Campus Virtual Tours & Maps Emblem Modern Campus Lifelong Learning Workforce and Community Emblem Site Menu Open Site Menu Close
Skip to Content
Modern Campus Support
Site Search
Search

JavaScript in Layout Builder Tiles

Those with access can add JavaScript to individual Layout Builder tiles to make layouts and pages (Layout Control Files [LCFs]) more interactive. Layout Builder inserts JavaScript in the LCFs <head> element in the order you set in the tile.

Add custom JavaScript that will run on any LCF page that uses this tile, as follows:

  1. When you create or edit a tile, select to see the Source editor for HTML, JavaScript, or a split view of both.
    • The JavaScript editor shows you potential code errors.
    • While in Split view, click the separator between the editors and drag to resize. To change your editor view, click the name for the view you want or close the view.
  2. To see how the tile will look when published, go to the page actions toolbar, click Preview.
    • JavaScript tiles will also preview in layouts and LCF pages.
  3. Save and Launch.
  4. Then, add your tile to layouts to create LCF pages.
    • If you have edited and re-launched a tile, update the layout(s) that use the tile. Edits will appear automatically in pages on the staging server that use the tile.

JavaScript ReferenceLink to this section

You can also add JavaScript references to use shared libraries and frameworks, like jQuery, in your tiles.

  1. When you create or edit a tile, go to Properties > JavaScript Reference.
  2. In the dropdown, select a preloaded reference.
    • Or +Add > Create Reference.
    • Enter name and internal or external URL.
    • Select the checkbox to load this reference after the page loads.
    • Click Create.
  3. Save and Launch.

As as many unique references as you like to as many tiles as you like. Don't add the same reference twice in a tile.

Manage References

Edit, delete, disable, and see where your JavaScript references are used (subscribers).

  1. Go to Content > Layout Builder > JavaScript References.
  2. Click the More Actions menu for a reference.
  3. Click Edit or File > View Subscribers, Disable, Delete.

View Subscribers

See the tiles that use the JavaScript reference. Click the tile name to preview the tile or Export to CSV.

Disable

Disable a JavaScript reference to prevent it from being added to new tiles. Tiles, layouts, and pages that use this reference will not be affected. Administrators will still have access to a disabled references and can enable it for use.

Delete

Delete a JavaScript reference to remove it from the list of available references. Administrators will no longer have access to a deleted reference. Deleted references will remain in existing tiles, layouts, and pages until you remove them.

Related Content
Related Content

By continuing to use this site, you agree to the storing of first- and third-party cookies on your device to enhance site navigation; analyze site, product, and service usage; and assist in our marketing and promotional efforts. Cookie Policy