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

 
Skip to Content

JavaScript in Melody™ Tiles

Add JavaScript to individual Melody tiles to make layouts and pages (Layout Control Files [LCFs]) more interactive. Melody 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.