Hello World

Summary

The traditional code sample showing a primitive customisation, the Hello World script.

Installation

Within the Customisations\HelloWorld directory is HelloWorld.xml file.
Register that xml using ShUIE Admin.exe in a command prompt.
("path\ShUIE.Admin.exe" -o addentry -url http://server name -filename "path\HelloWorld.xml")

What it does

Before:
before.png

After:
after.png

How it does it

Let's take a look at the HelloWorld.xml file and go through what we've done.

There are five elements in the file, and we'll step through them one at a time.

Header, Title and Context

First we set up our context. As this is Hello World we want to make sure you see it, and so we don't actually define any context... if no context is defined then the context is global.

The active flag controls light-up, setting it to 1 means enabled. Order is use to order several entries.

And finally we store the Id for this context as we need that in a moment to tie the context and script to each other.
<?xml version="1.0" encoding="UTF-8"?>
<shuie order="50" active="true">
  <title><![CDATA[HelloWorld]]></title>
  <contexts />

Script

Next we up we need to insert our JavaScript, the JavaScript we want to run is this simple piece of jQuery:
$(document).ready(function() {
	if (p3context.CurrentList) 
		$("h1 > a").text(testVar.textValue + " do you like collaborating using " + p3context.CurrentList.Title + " list?");
	else
		$("h1 > a").text(testVar.textValue + " do you like collaborating using " + p3context.Web.Name + " site?");
    
  $("h1 > a").attr("class", "testClass");
});

As you can see, all that does is wait until the page has loaded, and then change the site header to greet the logged on user. If we have a context of a List then the greeting also asks if they like collaborating using that list.

We simply wrap it in a CDATA element:
<javascript minify="true">
  <code>
    <![CDATA[
$(document).ready(function() {
	if (p3context.CurrentList) 
		$("h1 > a").text(testVar.textValue + " do you like collaborating using " + p3context.CurrentList.Title + " list?");
	else
		$("h1 > a").text(testVar.textValue + " do you like collaborating using " + p3context.Web.Name + " site?");
    
  $("h1 > a").attr("class", "testClass");
});
      ]]>
  </code>
</javascript>

CSS
.testClass{
  border:2px solid red;
  font-weight:bold;
  font-size:14pt;
  width:100%;
}

As for the JavaScript element, we wrap the CSS in a CDATA element.
Plus, we can have several CSS for each page, depending on the media type, ie where it is use. You can use "screen", "print", "mobile", etc..

<styles>
  <css minify="true" mediatype="screen">
    <code>
      <![CDATA[
.testClass{
  border:2px solid red;
  font-weight:bold;
  font-size:14pt;
  width:100%;
}]]>
    </code>
  </css>
</styles>


JSON
var testVar = {textValue: "Hello"}

JSON objects are data structures easily accessible by JavaScript. It is declared has a simple variable and then accessible by it name.
In this example, the JSON object is called in JavaScript as "testVar.TextValue".

<json minify="true">
  <code>
    <![CDATA[var testVar = {textValue: "Hello"}]]>
  </code>
</json>

Last edited Jul 24, 2009 at 9:45 AM by diogoxluis, version 11

Comments

No comments yet.