Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

...

  •  Click the box if happy with the content.

...

Multiexcerpt
hiddentrue
MultiExcerptNameFeature Title

CMS Scripts & Styles Editor Functionality

Multiexcerpt
MultiExcerptNameFeature Overview

Overview

Past functionality

Whenever you needed to upload customised JavaScripts or Style Sheets for use in CMS, you would need to navigate to the File Manager menu and upload the files into the relevant folder, then reference them in a HTML Snippet widget, and apply to a page(s).

If you had to change the scripts, you couldn’t edit them within CMS. Instead, you had to make your changes locally and upload the amended files to your CMS.

The HTML Snippet widget allows you to do so much more than applying styles or running scripts. Therefore, unless you added a meaningful description to the HTML widget, how would you know what it was doing? You couldn't.

New functionality

The new CMS Style Sheet Editor functionality allows you to create and edit scripts and styles from within CMS, and, because the widget functions to run scripts or apply styles only, you know at a glance if a page is using customised JavaScript or Style Sheets.

The Scripts & Styles widget allows you to bundle related scripts and styles into one widget, to function as a unit. Or you can load multiple Scripts and Style widgets to operate independently on a page. Ticking the checkbox next to the widget in the page layout turns them on or off when needed.

Image Removed

How does it work?

When you create a customised script or style sheet in CMS, the system will add them to the correct system folder. All files are minimised once you click Save to reduce load times.

...

How does Scripts & Styles work?

When a custom script or style sheet is created, it is automatically added to the correct system folder and available for selection in a template. To reduce load times, each file is minified once saved.


You can:

  • sort all scripts or styles by file name and date last edited.
  • view which pages/templates a file is in use.
  • view historical versions of a file, and its audit trail of the date/time saved and the user.
  • use the comparison tool to check between two versions of a script or style.
  • roll back to a previous version if the current version is not behaving as expected

...

  • .

To see the scripts and styles that exist in your CMS, open File Manager, and review the entries in the css and js folders under Theme.

Image Removed

Step-by-step guide

...


When you enter the Scripts or Styles screen, all files are listed. At a glance, you can see the number of times a file is in use and its last edited details. Files can be sorted by file name and date last edited.   

Image Added 


Once a script or style has been saved, it is available for adding to a page or template. See: Scripts & Styles Widget.

Image Added


Panel

On this page:

Table of Contents


Create a script or style

To best explain the functionality, we will

...

make a simple change to the background colour of our Store Locator page.

...

  1. In your CMS,

...

  1. go to Advanced Content

...

  1. Scripts & Styles.

Image Removed

3.        Select Style Sheets

  1. Image Added

  2. Select Style Sheets. All existing style sheets are displayed.
    Image Added
  3. Click Add Script/Style

...

  1. on the top right

...

  1. corner.

  2. In Add Script/Style, select Style Sheet.
    Image Added

  3. In File Name, enter an appropriate name that follows the naming conventions of our site.

Image Removed


  1. Click Add

...



  1. In the blank editing window

...

  1. , start typing in your custom style sheet

...

  1. . (For a guide to using the Editor, see Code Editor.) Or you can paste

...

  1. text into the Editor.

Image Removed

...


  1. Image Added

  2. Click Save

...

  1. .

9.        If you hover over Options at the top right of your browser, next to Cancel and Save, you will see File History. Use the file history to monitor changes to the script and revert to an older version if needed by clicking on the version and selecting Restore this version.


  1. Click Cancel to exit.

Apply a script or style to a page/template

Now we will apply that style sheet to our Store Locator page (or the Page that you have chosen).

...


  1.  In your CMS,

...

  1. go to Content → Pages & Templates

...


  1. Use the Search tool to find 'Store Locator'. NOTE - Your page name may be different.

...

  1. Image Added

...


  1. Click Edit next to

...

  1. the page/template name.

14.      Click Image Removed


  1. In the template, click Add Widget.
    Image Added

  2. In the search field, start typing 'Scripts & Styles' — the system will auto-fill the results.

Image Removed

...

  1. Image Added

  2. Select 'Scripts & Styles

...

  1. ' and click Add Widget Image Modified

...

17.      In the window that opens up, type in a meaningful description.

18.      Click Edit next to Scripts & Styles.

Image Removed

19.      The system will display customised script and style files. Select the one you created from the dropdown list and click Image Removed

...

  1. .  

  2. The Scripts & Styles Widget automatically opens. In Description, enter a meaningful description for this use. This will display next to the style name when in use.

  3. Add a Layer if needed.  (See: Layers.)

  4. In Scripts & Styles, select the style you created, then click Add.

    Image Added

  5. Click Edit to make some last minute changes to the Style Sheet, otherwise,

...

The CMS will now show you have 1 applied Script & Style. You can add multiple scripts or styles to the same widget.

21.      “Enable widget on Save” is selected by default, disable it if you don’t want it taking effect yet. Otherwise, click Save.

22.      You can now see, at a glance, that the Store Locator page has a script or style applied to it.

Image Removed

...

  1. to apply the script or style, toggle ON Enable widget on Save, then click Save.


    Image Added

  2. If the Page Preview setting is on, click Publish (top right of the screen)

...

  1. .

...


  1. Go to your site and open the Store Locator page (or the page to which you made changes).
    Image Modified

...

Additional Information

Multiexcerpt
MultiExcerptNameAdditional Info
If you'd like to take advantage of the new search capabilities for your site, please contact our Support Team.


Compare or revert to an earlier version of a script or style

The file history of each script and style lists all versions with saved dates/times and users. You can compare versions. If you're not happy with the current version, revert to an earlier one.

  1. In the CMS, go to Advanced Content → Scripts & Styles.

  2. Click on either the Javascript or Style Sheets tab.
    Image Added

  3. Click the Edit button next to the script or style.
    Image Added

  4. In the 'Edit' page, hover on Options, then click File History.
    Image Added

  5. The current and previous versions are listed. To view a previous version, click on it.
    Image Added

  6. To compare two versions, in the Compare? column, toggle ON the two versions, then click Compare Version
    Image Added

  7. Changes are highlighted. When you've finished viewing, click Clear Compare.
    Image Added

  8. To use a previous version, click on it, then click the Restore this version button.
    Image Added

  9. To confirm, click Save. The previous version is copied and saved as the latest version.
    Image Added


Delete a script or style


Info

Deleting non-system scripts and styles in the CMS is available from 4.17+. NOTE - Scripts and styles currently used on a page or template cannot be deleted. They have to be removed from templates first.


  1. In the CMS, go to Advanced Content → Scripts & Styles.

  2. Click on the Javascript or Style Sheets tab.

  3. User-created files will have both 'Edit' and 'Option' buttons. To delete the file, hover over Options, then click Delete. NOTE - System files cannot be deleted
    Image Added

  4. In the delete confirmation popup, click OK.


Check where a script or style is in use

  1. In the CMS, go to Advanced Content → Scripts & Styles.

  2. Click on the Javascript or Style Sheets tab.

  3. Find the file name, hover over its Options button, then click Where It's Used.
    Image Added

  4. The templates currently using the script or style are shown.
    Image Added

Minify Scripts and Styles


To improve the load time of web pages on your website, existing files can be minified.


  1. Go to Advanced Content → Scripts & Styles.
    Image Added
  2. Hover over Options, then click Minify All Files.
    Image Added
  3. In the popup, confirm you want the files minified.


 


Additional Information


Minimum Version Requirements


Multiexcerpt
MultiExcerptNameMinimum Version Requirements

4.13.02


Prerequisites


Multiexcerpt
MultiExcerptNamePre reqs

Upgrade to version 4.13.02


Self Configurable


Multiexcerpt
MultiExcerptNameSelf Configurable

Yes


Business Function


Multiexcerpt
MultiExcerptNameBusiness Function

...

Content


BPD Only?


Multiexcerpt
MultiExcerptNameBPD Only

Yes


B2B/B2C/Both


Multiexcerpt
MultiExcerptNameB2B/B2C/Both

Both

...

Multiexcerpt
MultiExcerptNameBallpark Hours From CV (if opting for CV to complete self config component)

Contact CV Support

...

Multiexcerpt
MultiExcerptNameBallpark Hours From CV (in addition to any self config required)

Contact CV Support


Third Party Costs


Multiexcerpt
MultiExcerptNameThird Party Costs

...

n/a or Fees apply

...

Multiexcerpt
MultiExcerptNameCMS Category

 CMS Category

Content by Label
showLabelsfalse
max5
spacesKB
showSpacefalse
sortmodified
reversetrue
typepage
cqllabel in ("new","ver41302","how-to") and type = "page" and space = "KB"
labelsnew ver41302 how-to

...

N/A




Multiexcerpt
hiddentrue
MultiExcerptNameFeatures List Headers

Macro Instructions for carrying Article Information through to Feature List

Minimum

Version

Requirements

BPD

ONLY


Business Function

CMS Category

B2B
B2C

BOTH

Feature

Feature Description

(Written for our customers and can be pasted into comms sent to them)

Additional info

Pre-Reqs/
Gotchas

Self Configurable

Ballpark Hours
From CV

(if opting for CV to complete self config component)

Ballpark Hours
From CV

(in addition to any self config required)

Third Party Costs

Instructions for carrying Excerpts through from this page to the Feature List

Article Page:

Add macro  / Multiexcerpt (or copy and existing excerpt and edit) or (Copy existing page and place content into existing excerpt macros)

On Features List page:

Click in the Cell to be populated  / add macro /  Multiexcerpt Include / Select the Article page and the excerpt (or copy another feature line and edit the 'Article page' source.

Issues Found in TestingIssues Found in Testing

Steps I followed to find the issue

The CMS allows an administrative user to change the name of uploaded files—including scripts and style sheets—that are in use in CMS.

a.     I changed the cv.css.circle.css to cv.css.bread.css

Image RemovedImage Removed

b.    Because the system allows you to do that, I expected it would propagate the changes to the Scripts & Styles widget that uses it.

Image Removed

c.     If I try to edit that file in CMS, I get an error.

Image Removed

d.    Any attempt to interact with that file gives an error

Image Removed

e.    The renamed file doesn’t show up in the list of Scripts & Styles

Image Removed

f.     If you add a script/style, it allows you to type in a file of the same name, and it presents you with an empty script.

Image RemovedImage Removed

g.    I can remove the file (or any file) without it warning me that widgets use it.  Yet, it still shows in CMS (Scripts & Styles).

Image Removed

h.    If I click to edit that file, I get the “Unable to find the file. Please contact support.” Error.

i.     Also, once it is gone from File Manager, there is no way to remove it from CMS. I guess they would log a service call?

Conclusion

...



Related help

Content by Label
showLabelsfalse
max5
spacesKB
showSpacefalse
sortmodified
reversetrue
typepage
excludeCurrenttrue
cqllabel = "scripts-styles" and type = "page" and space = "KB"
labelsnew ver41302 how-to