Customizing the Portal Home Page with javascript
Steve_Wright
Cireson Support Advanced IT Monkey ✭✭✭
In response to questions in the community and support tickets, our support team covered this in our most recent Free Training Friday (FTF) sessions.
There are many ways to customize the portal pages. This method works well if the elements are already on the page and can be manipulated by javascript reordering elements. We will be covering other methods in future FTF webinars.
Here's a break down the process we are following:
1) Identify the elements involved
2) Test the element change in the browsers Dev tools > Console tab
3) Add customization to CustomSpace folder
4) Modify custom.js to launch script
1) Identify the elements involved
Using the Elements tab you can locate the class you wish to manipulate. In this basic example, we are swapping the order of the request offerings list with the KB articles list so that the request offerings are on top. The image shows the KB lists highlighted and found in the code. Both the .sc__home-kb-lists and .sc__home-ro-lists classes are part of the .sc__home class.
2) Test the element change in the browsers Dev tools > Console tab
In the console tab, we can confirm the code for the class by typing $('.sc__home-kb-lists') the result is shown below:
The manipulation we want to do is to have the kb-list show up at the end of the .sc__home element. This can be done by using the AppendTo jQuery method using the following code in the consol tab:
$('.sc__home-kb-lists').appendTo($('.sc__home'))
Once run, the change is seen on the loaded page:
3) Add customization to CustomSpace folder
We can now add our customization to the customspace folder. For better management of customizations we follow a practice of creating a folder in customspace with the name of the customization. in our example we only have one .js file, but there may be times when multiple files are used so a folder keeps everything together.
The code in ReorderHomepage.js is below:
we are using a mthod called mutation observer to check for the element before running the code.
1. Enter the element to see if it exits
2. Enter the code to run when it does.
The second part is adding the path and url you want the script to run for:
In our example the script will only load for the URL "/ServiceCatalog/Listing/" which is our default home page.
The files are attached below. As with any customization, please test thoroughly and make sure you understand what it is doing in your environment. Kudos for this solution and best practices go to Geoff Ross. we invite your comments and feedback!
Thanks,
Steve
There are many ways to customize the portal pages. This method works well if the elements are already on the page and can be manipulated by javascript reordering elements. We will be covering other methods in future FTF webinars.
Here's a break down the process we are following:
1) Identify the elements involved
2) Test the element change in the browsers Dev tools > Console tab
3) Add customization to CustomSpace folder
4) Modify custom.js to launch script
1) Identify the elements involved
Using the Elements tab you can locate the class you wish to manipulate. In this basic example, we are swapping the order of the request offerings list with the KB articles list so that the request offerings are on top. The image shows the KB lists highlighted and found in the code. Both the .sc__home-kb-lists and .sc__home-ro-lists classes are part of the .sc__home class.
2) Test the element change in the browsers Dev tools > Console tab
In the console tab, we can confirm the code for the class by typing $('.sc__home-kb-lists') the result is shown below:
The manipulation we want to do is to have the kb-list show up at the end of the .sc__home element. This can be done by using the AppendTo jQuery method using the following code in the consol tab:
$('.sc__home-kb-lists').appendTo($('.sc__home'))
Once run, the change is seen on the loaded page:
3) Add customization to CustomSpace folder
We can now add our customization to the customspace folder. For better management of customizations we follow a practice of creating a folder in customspace with the name of the customization. in our example we only have one .js file, but there may be times when multiple files are used so a folder keeps everything together.
The code in ReorderHomepage.js is below:
we are using a mthod called mutation observer to check for the element before running the code.
1. Enter the element to see if it exits
2. Enter the code to run when it does.
4) Modify custom.js to launch script
To run the script, we use a best practice of launching scripts from custom.js in a way we can manage multiple scripts.
To run the script, we use a best practice of launching scripts from custom.js in a way we can manage multiple scripts.
The first part is the script loader code. The comments outline what it does. Note: if you don't want to see the loaded scripts paths in the console log, you can comment out line 27 (highlighted).
The second part is adding the path and url you want the script to run for:
In our example the script will only load for the URL "/ServiceCatalog/Listing/" which is our default home page.
The files are attached below. As with any customization, please test thoroughly and make sure you understand what it is doing in your environment. Kudos for this solution and best practices go to Geoff Ross. we invite your comments and feedback!
Thanks,
Steve
6