Lab Guide

Table of Contents

1. Applying a Basic Theme to The Cireson Service Manager Portal
2. More Specific Styling
3. Basic JavaScript Customisation
4. Creating a Custom Task
5. Advanced Task Integrating with Remote Support

Lab Details

Server

RDP to sandpit1377857395000.southcentralus.cloudapp.azure.com:64624

Credentials

Username: JohnLeeds
Password: Cireson123

1. Applying a Basic Theme to The Cireson Service Manager Portal

We're going to apply a Portal theme in order to set our basic colour scheme in the Portal.

1. Load Portal at http://cset-a-2016smms/ using Chrome. Note the Out of Box colors

2. Head to http://portalthemer.cireson.com/

3. Select the latest version from the selector at the top of the page.

4. Select same basic colours.

5. Click Download Theme CSS to drop out your CSS file.

6. Copy it into your CustomSpace folder at C:\inetpub\CiresonPortal\CustomSapce

7. Edit custom.css from CustomSpace.

8. Add the following at the top.

   @import _custom.theme.min.css_;

9. Refresh your Portal to see your new theme.

10. Experiment with different themes.

2. More Specific Styling

We're going to change the appearance of a particular element, that cannot specifically be done using the themer tool. In this lab were going to change the color of the header bar, discover its unique selector and add a CSS rule.

1. Right click on the element you want to customise and choose Inspect.

   

2. Find the element you want to style in the HTML. We're looking for a unique class on the element.

3. In this case we can use the navbar class.

4. Edit custom.css from CustomSpace.

5. Add a ccs rule for the navbar class

    .navbar {
   
    }

6. Add your styling into the rule. Don't forget the US spelling of color.

    .navbar {
        background-color: red
    }

7. You can define your color in words or rgb in decimal or hex.

    .navbar {
        background-color: rgb(255, 0, 0)
    }

    .navbar {
        background-color: #ff0000
    }

8. Experiment with different colours. You can try different properties too. color will change the font colour, font-size will change the font size.

3. Basic JavaScript Customisation

CSS Customisation is all about changing the look and feel of the portal. To change the behaviour, we need to use JavaScript.

We're going to add a custom message to the Portal Homepage.

1. We'll develop our code in the Browsers console. Open the Portal the Homepage and press F12 Go to the Console tab.

2. We'll use jQuery to get the element we want to manipulate.

   $("h1[class='page_title']")

3. Pressing Enter will return an array of one object. Expand it and hover over the first (0th) object and the area on the page will be highlighted.

   

4. Now we have the element we wish to manipulate, we can do so. Run this to add our custom message.

   $("h1[class='page_title']").after('<h4>Hello. Welcome to the Leeds Event Portal.</h4>');

5. We could even pull meta data from the current logged on user and add that into our message to personalise it. session.user contains the logged on user's information. Refresh the page to start again from scratch.

   $("h1[class='page_title']").after('<h4>Hello ' + session.user.FirstName + '. Welcome to the Leeds Event Portal.</h4>');

   Once we have it working as we want, we need to make this permanent. We need the portal to run this extra code each time the Homepage loads. We use the custom.js file to do this.

   The custom.js file is a JavaScript file that the portal will execute last on every page so we can use it to override the Portal's default behaviour.

   We don't want to place our final code directly in the custom.js file directly. Doing so would mean it will run on every page, potentially slowing the Portal down and will make the custom.js file difficult to manage over time.

   Instead we will place our code in a separate js file and use the Cireson ScriptLoader to import it.

6. Inside the CustomSpace folder create a new subfolder called WelcomeMessage

7. Inside WelcomeMessage create a new file called WelcomeMessage.js and paste our working code into it.

8. Copy and Paste the Cireson ScriptLoader code from here

   The ScriptLoader efficiently loads external js files into the Portal. It takes two Parameters. The path to the external js file and a list of strings to look for in the URL of a page to determine whether to run the code here or not.

9. Add our call to the ScriptLoader at the bottom of custom.js. This will load our external file, but only when we are on the Homepage /View/02efdc70-55c7-4ba8-9804-ca01631c1a54

   loadScript("/CustomSpace/WelcomeMessage/WelcomeMessage.js", ["View/02efdc70-55c7-4ba8-9804-ca01631c1a54"]);

10. Refresh your Portal. You will need to disable the cache in the Network Tab to ensure the browser is pulling the latest files. You should see the file being loaded in the Console Tab.

11. However, the custom welcome message is not showing. We have to handle a few timing issues to avoid our custom code being executed before the page is ready to process it.

    $(document).ready(function () {
      setTimeout(function () {
        $("h1[class='page_title']").after('<h4>Hello ' + session.user.FirstName + '. Welcome to the Leeds Event Portal.</h4>');
      },3000)
    });

12. One more refresh should show the custom message.

13. The whole customisation can be toggles off and on but commenting and uncommenting the line where we call the ScriptLoader. This is down with a double backslash.

    //loadScript("/CustomSpace/WelcomeMessage/WelcomeMessage.js", ["View/02efdc70-55c7-4ba8-9804-ca01631c1a54"]);

14. Experiment toggling the customisation off and on and with different messages.

4. Creating a Custom Task

A very useful area of customisation is custom tasks. These can be added to the form of any type of SCSM Object to perform pre-defined repeatable functions. In this lab we're going to create a custom task to run on an Incident.

1. Once again, rather than add our code directly to custom.js we'll add a subfolder and external js file and load it using the ScriptLoader. Create a Subfolder and file for our custom task, both called IncidentTask.

2. Add the base code for the task into IncidentTask.js We'll add the DoSomething later.

   app.custom.formTasks.add('Incident', "Custom Task", function (formObj, viewModel) {
     //Do Something
   });

3. Use the ScriptLoader to ensure this code runs on every Incident page but nowhere else.

4. Refresh the Portal and open any Incident from Active Work. We should see our custom task on the right.

5. Now we can replace the //Do Something with some more JavaScript to make our task do something.

   app.custom.formTasks.add('Incident', "Custom Task", function (formObj, viewModel) {
     alert("Hello World");
   });

6. Because we have access to the Incident data in the viewModel object, we can also make it do something useful.

   app.custom.formTasks.add('Incident', "Custom Task", function (formObj, viewModel) {
     viewModel.set("Title","This is a new Title");
   });

7. Experiment with other JavaScript snippets to make more custom tasks

8. Experiment making custom tasks for other type of object, eg Service Request, Change Request, Hardware Asset, Shared Mailbox.

End

Well done! You have complete these labs.