Page tree
Skip to end of metadata
Go to start of metadata

Introduction

Skyline has the ability to include custom JavaScript and custom css. It is not recommended that you use this feature for replacing any of the styling functionality that is already included in the theme configuration section. However, it can be very useful for adding additional functionality to Skyline such as a branded welcome message, live help chat, or a ticketing system.

Do not attempt to use this feature unless you understand JavaScript and CSS. Misuse of this feature has the potential to degrade the performance of your platform. Should any untoward results occur, custom JavaScript and CSS can be disabled by appending /?safemode=1 to the URL of your management console. For example, if your management console is normally accessed on https://example.domain.com, the safe mode URL would be https://example.domain.com/?safemode=1.

CSS and JS settings are not global to the entire application; they are accessible on a per theme basis.

JS Libraries & Namespaces

Custom JS within Skyline has access to common JS Libraries such as JQuery, and D3 via the normal namespaces.

Common JS Namespaces
//JQuery
$(document).ready();
//D3
d3.selectAll("p")

It also has the ability to access information directly from Skyline itself via a custom Flexiant namespace (fco)

Skyline JS Namespace
//Skyline's namespace
fco.ready();

Using the FCO Namespace

Custom JS in Skyline works by adding the JS snippet to the end of the body tag when loading the page. There is no guarantee when the snippet will be loaded during the Skyline initiation and therefore there is no guarantee when the snippet will run. To ensure that Skyline has successfully initialised before running your code, please override and begin your code from the ready method within the FCO namespace. E.g.

FCO Ready
console.log("Skyline initialisation is NOT guaranteed at this point.");
 
fco.ready = function() {
	console.log("Skyline initialisation is guaranteed at this point.");
};

 

Helpers

The following helpers are available within the FCO namespace:

MethodDescription

fco.authenticated();

Return true if Skyline has an authenticated user.

fco.admin();

Return true if the active user has admin credentials.

FCO Resources

The following resources are available within the FCO namespace:

ResourceDescription

fco.user();

Returns the active user object.

fco.customer();

Returns the active customer object.

All resource objects have an additional helper method for finding resource keys

var user = fco.user();
if (user.hasResourceKey("#__KeyName")) {
	// has resource key
} else {
	// does not have resource key
}

Utilities

The following utilities are available within the FCO namespace:

UtilityDescription

fco.util.translate(String... keys);

Returns the translated string of the given key(s). If more than one key is given then the first key is considered the template. If no key is found then the first key is returned.

fco.util.translation(String... keys);

Returns the translation object corresponding to the given key(s). This object can be manipulated if required, unlike the translated text returned by the translate utility.

Utility examples

fco.util.translate("LBL_SERVER");                      // Returns "Server" on system default.
fco.util.translate("Disk");                            // If not found in the translations, "Disk" is returned.
fco.util.translate("Hello, {0}!", "World");            // Returns "Hello, World!"
fco.util.translate("{0}, {1}", "LBL_SERVER", "World"); // Returns "Server, World" on system default.

Actions

The following actions are available within the FCO namespace:

ActionDescription

fco.action.view(String uri);

Will navigate to a specific tab on a page, for example the Servers tab on the Resources page.

Example
 fco.action.view('User/0000001');

fco.action.view(String group, String id);

Will navigate to a specific tab on a page, for example the Servers tab on the Resources page.

fco.action.view(String[] args);

Will navigate to a specific tab on a page, for example the Servers tab on the Resources page.

fco.action.view();

Will return the current workspace address in an array.

fco.action.manage(String uri);

Will navigate to a specific manage panel.

fco.action.manage(String resourceType, String uuid);

Will navigate to a specific manage panel.

fco.action.manage(String[] args);Will navigate to a specific manage panel.

fco.action.manage();

Will return the current manage panel address in an array.

 

E.g.

var oldWorkspace = fco.action.view();
console.log(oldWorkspace); 				// Prints [user, 000000] to the console.
fco.action.view("user/012345");         // Navigate to "012345" tab on "user" workspace.
fco.action.view(oldWorkspace);			// Navigate to "000000" tab on "user" workspace.
fco.action.manage("server", "528b4ef4-ddc0-3d8c-8649-d00983ad2f0a") // Open manage panel for a server with the given uuid.

Modifying the UI

The following UI modification options are available within the FCO namespace: 

Each of these options returns an object which can be re-used, with the exception of alerts/confirmations.

UI elementCodeDescription
Label

var lbl = fco.create.label(String key);

Returns a new label object with the translated key.

Labels also have the following methods:

lbl.getText() 						// Returns the key used as the translation
lbl.setText(String key)				// Changes the translated text
lbl.addStyle(String classname) 		// Adds a CSS class to the label
lbl.removeStyle(String classname)	// Removes a CSS class from the label 
Icon

var ico = fco.create.icon(String key);

Returns a new icon object with the translated key.

Icons also have the following methods:

ico.getText() 						// Returns the key used as the translation
ico.setText(String key)				// Changes the translated icon
ico.addStyle(String classname) 		// Adds a CSS class to the icon
ico.removeStyle(String classname)	// Removes a CSS class from the icon 
Button

var btn = fco.create.button(String key);

Returns a new button object with the translated key.

Buttons also have the following methods:

btn.enabled(Boolean isEnabled)		// This function will enable/disable the button
btn.addClickHandler(Function fn)	// This function will fire when the button is clicked
btn.addStyle(String classname) 		// Adds a CSS class to the icon
btn.removeStyle(String classname)	// Removes a CSS class from the icon

It is also possible to manipulate existing buttons. At present the only method which can be called on a button is btn.enabled. This is potentially useful if you want to disable an existing button or buttons without using CSS.

For example, do disable the Add Server + button on the dashboard, do the following:

Find the button in the browser's development tools (highlighted in blue above) and run a JavaScript command to find that element using native JS or jQuery. Once you have a reference to the button in JavaScript it's as simple as calling the method you wish on that element:

var addServerBtn = $('div[data-csh-id="CTX_HELP-WORKSPACE#USER-BUTTON_ADD_SERVER"]').get(0); // Gets the first element that matches the pattern.
addServerBtn.enabled(false); // Sets the button to disabled.

Outcome:

Modal

var modal = fco.create.modal( options );

Options is a JS object with the following properties:

header: String (default: "")
onShow: Function (default: null)
onHide: Function (default: null)

Returns a new modal object.

Modals also have the following methods:

modal.show();	// Show the modal.
modal.hide();	// Hide the modal.
Pop-over

var popover = fco.create.popover( options );

Options is a JS object with the following properties:

target: DOM Element (default: null) // The DOM Element you want the popover to attach to.
message: String (default: "") // The message to display.
direction: String ("north", "east", "south", "west", "none"; default: "north") 
// The positioning of the popover relative to the target. North is above the target.
alignment: String ("north", "east", "south", "west", "none"; default: "north") 
// The alignment of the pop-over relative to the target. 
// This specifies the direction of the pop-over's longest axis. 
// The alignment must be on the opposite axis to the direction.
// For example, if the direction parameter is on the vertical axis,
// the alignment must be on the horizontal axis, and vice versa.
auto: Boolean (default: true) 
// Whether you want the pop-over to disappear when it loses focus.
maxHeight: Integer > 0 (default: "") // The maximum height of the pop-over in px.

Returns a new popover object with the provided configuration.

Popovers also have the following methods:

popover.show();		// Show the popover.
popover.hide();		// Hide the popover.

As with buttons, it is possible to manipulate existing pop-overs. Pop-overs in this sense can also include drop down menus, such as the page navigation menu.

To apply a method to an existing pop-over, follow the same steps as for buttons, looking for the element in the DOM which has a class of Popover.

Alert

Unlike other create methods that return an object that can be used time and time again, alert and confirm dialogs do not return any object and instead show immediately.

fco.create.alert( options );

Options is a JS object with the following properties:

header: String (default: "")
message: String (default: "")
callback: Function (default: null)	// Fired once the user clicks ok.

In a lot of themes (including the default skyline theme) the headers of alerts and confirms are hidden, so don't be confused when your header doesn't appear on certain themes.

Shows an alert dialog in the centre of the screen with a message and an OK button.

Confirmation

Unlike other create methods that return an object that can be used time and time again, alert and confirm dialogs do not return any object and instead show immediately.

fco.create.confirm( options );

Options is a JS object with the following properties:

header: String (default: "")
message: String (default: "")
callback: Function (default: null)	// Fired once the user clicks ok.

In a lot of themes (including the default skyline theme) the headers of alerts and confirms are hidden, so don't be confused when your header doesn't appear on certain themes.

Shows a confirmation dialog in the centre of the screen with a message, an OK button, and a Cancel button.

Custom JavaScript examples

For examples of how custom JavaScript can be used to modify and extend the capabilities of Flexiant Cloud Orchestrator, see the pages listed below:

  • No labels