SPEAK for Newbies – Part 6: SPEAK Helpers
SitecoreSPEAKThe main SPEAK .js file contains a lot of very useful helpers that you can use in your own applications and components. To remind you, the PageCode component uses require.js
to load in a bunch of scripts. The Sitecore .js file is highlighted below.
(function (global) {
require.config({
baseUrl: "/sitecore/shell/client/Speak/Assets",
paths: {
jquery: "lib/core/deps/jQuery/jquery-1.10.2",
underscore: "lib/core/deps/underscore/underscore.1.4.4",
knockout: "lib/core/deps/ko/knockout-2.2.1",
backbone: "lib/core/deps/backbone/backbone.1.0.0",
sitecore: "lib/core/sitecore-1.0.2",
sitecorify: "css/sitecorify",
bootstrap: "lib/ui/bootstrap",
jqueryui: "lib/ui/deps/jQueryUI/jquery-ui-1.10.1.custom",
dynatree: "lib/ui/deps/DynaTree/jquery.dynatree-1.2.4",
dynatreecss: "lib/ui/deps/DynaTree/skin-vista/ui.dynatree"
},
shim: {
'jquery': { exports: 'jQuery' },
'jqueryui': { deps: ['jquery'] },
'underscore': { exports: '_' },
'knockout': { deps: ['underscore'], exports: 'ko' },
'backbone': { deps: ['jquery', 'underscore'], exports: 'Backbone' },
'sitecore': { deps: ['backbone', 'knockout'], exports: 'Sitecore' },
'dynatree': { deps: ['jqueryui'/*, 'css!dynatreecss'*/] }
},
map: {
'*': {
'css': 'lib/core/deps/css'
}
}
});
require(["sitecore"], function (_sc) {
_sc.load(global);
});
})(this);
The sitecore
module is used by all page code (and presumably all components). To remind you, here is the first line of my page code from part 5:
define(["sitecore", "jquery"], function (Sitecore, jQuery) {
As you can see, the sitecore
module is injected into the function as Sitecore
(you could just as easily have called it _sc, sc, scspeak). It’s this magical object that will give you access to a bunch of really useful helpers. Let’s have a look at what’s available (from somewhere in the depths of sitecore-1.0.2.js):
_.extend(_sc, {
Helpers: {
url: urlHelper,
date: dateHelper,
id: idHelper,
string: stringHelper,
object: objectHelper,
invocation: invocationHelper,
overlay: overlayHelper,
window: windowHelper
}
});
_sc.Helpers.window.init();
You can use the helpers in your own application. Below is a list of some of the helpers (I isolated the ones I felt were most useful):
Sitecore.Helpers.url
combine
Combine two ‘URL’ strings – will put a leading / in front of everything, so shouldn’t be used with domains.
var combined = Sitecore.Helpers.url.combine('/my/path/to/something/', 'else');
isParameterNameAlreadyInUrl
var url = "http://www.mhwelander.net/?isSwedish=true;
var isInUrl = Sitecore.Helpers.url.isParameterNameAlreadyInUrl(url, 'isSwedish');
addQueryParameters
var originalUrl = "https://mhwelander.net/";
var processedUrl = Sitecore.Helpers.url.addQueryParameters(originalUrl, {
isSwedish: true
});
getQueryParameters
var parameter = Sitecore.Helpers.url.getQueryParameters(window.location.href)['parametername'];
Sitecore.Helpers.id
isId
The following will return true:
var isId = Sitecore.Helpers.id.isId('{EDF76D4D-E94B-4BAA-8CC7-AADCBB33092E}');
toId
This accepts a string formatted as a short ID, which is basically a GUID without the ’, ’, and ’-’ characters:
var isId = Sitecore.Helpers.id.toId('EDF76D4DE94B4BAA8CC7AADCBB33092E');
toShortId
This accepts a string formatted as a GUID:
var isId = Sitecore.Helpers.id.toShortId('{EDF76D4D-E94B-4BAA-8CC7-AADCBB33092E}');
Sitecore.Helpers.string
endsWith
The following returns true:
var endsWithWelander = Sitecore.Helpers.string.endsWith('Martina Welander', 'Welander');
equals
The following returns true(not case sensitive):
var equalsMartinaWelander = Sitecore.Helpers.string.equals('Martina Welander', 'Martina Welander');
format
Works a bit like String.Format
– use sparingly:
var formattedString = Sitecore.Helpers.string.format('{0}, {1}', 'Welander', 'Martina');
Sitecore.Helpers.object
getOwnProperties
The following returns an array of properties:
var person = { name: 'Martina Welander', nationality: 'Swedish', occupation: 'SPEAK minion' };
var arrayOfProperties = Sitecore.Helpers.object.getOwnProperties(person);
There are others – you can test them all out by using your browser’s developer tools. The main application is available as _sc
in your browser console.
Comments (Imported from wordpress)
bahan gorden rumah sakit
November 6, 2019 at 05:34
I blog often аnd I genuinely thɑnk you for уour content.
Thіs great article has truly peaked mу intеrest. I am gοing to taкe ɑ note of y᧐ur blog and keeρ checking fоr new informɑtion ɑbout once a weeқ. I opted in for yօur RSS feed аs welⅼ.