If you want to change the template (layout) and not the theme (colors), then you can have a look at this extension on GitHub that shows how to make your own template and moves the navigation menu from the left side to the top of the screen.
Keep in mind that it was made for iTop 2.4, so some minors changes might be needed if you are on a more recent version.
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Thanks Guillaume.
That extension seems to work "partly" on iTop 2.6.0.
However, I am having some problem trying to get documentation for changing the layout for the helpdesk user - not the end user portal. See attached screen-shot - I want to change the look and feel of section 1 and 2.
So, should i write extensions for the changing the "bricks" or write "templates" and separate twigs for each of these? I understand that the bricks is only for the end-user portal configuration. So where do I start for customizing the help-desk agent layouts.
It would be nice if there is a step-by-step description for something similar - if not, any pointers to documentations will be really helpful.
The helpdesk user interface that we comonly refer as the admin console cannot be modified with twig like in the end-user portal as it's made this an older technology. There is an API that allows you to add extras CSS / JS files, as well as some HTML markup, but you might not be able to change it too much.
Take a look at this API, through the $oPage object you will be able to add the said CSS / JS files (or directly in <style></em> / <em><script></em> tags). </p></style>
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Thanks for your reply. I have seen that API - but as far as i could make out it would allow me only to add extra markup and/or css and js file. But it will not allow me to modify the existing markup (unless i do additional javascript dom modification - which will be extremely unpleasant).
So, if i need a completely new custom admin console - do you think if we build the UI and then connect it with REST/JSON to iTop will it work ? Does iTop expose all functionality through REST/JSON?
Thanks,
Asif
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
In this case, it would be simpler to make a second portal instance dedicated to the helpdesk users IMHO. iTop supports several portals, each having its own settings and allowed profiles. So you could make a second one juste for the helpdesk. Check this sample extension on GitHub which guides you to add a new portal instance.
Building a new UI based on REST/JSON API would be time consuming and more over will not allow you to do all the features from the admin console.
What do you think?
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
So, if we create a second portal instance dedicated to helpdesk user, how do we route the login - for example, now when the "helpdesk agent" does a log in he/she is automatically routed to the admin console... so if we create a second portal, he/she will have to be routed always to the new portal - and everybody else too - other than the super-admin user who will be directed to the main admin console. So how do we ensure that everybody other than super-admin goes to the new instance of the portal? Or if we create a new instance of the portal every body will be redirected to the new instance instead of going to the main admin console?
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
If you look at the datamodel file of the extension, you will see there is a <portals></portals> part. This refers to all GUI of iTop, meaning both end-user portals and admin console.
In this tag, you can choose for each GUI, which profile will have access or not depending on their profiles. So you could restrict access or allow only Administrator profile.
You'll see that there is also a <rank></rank> part. When a user is allowed to access several GUI (eg. the admin console and a portal), it is automatically redirected to first GUI allowed for him regarding the rank. The user can then switch from a GUI to another.
So, if the helpdesk users should NEVER access the admin console, you should go with the profile restrictions solution. Otherwise, just play with the ranks.
You will find more information on these tags here under <portals></portals>
Last edit: Guillaume Lajarige 2019-02-26
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Yes you could do something similar! Changing the layout and aspect will require a lot a TWIG / CSS though.
Regarding the displayed bricks and their configuration, it's done through XML alteration of the Datamodel, so it is the right way to do it for future upgrades. :)
If you would like to refer to this comment somewhere else in this project, copy and paste the following link:
Hi All,
I am trying to customize the whole look and feel of the itop portal - menu
layout, browse layout -etc.
I was looking for some documentation and hoping to find some samples for
bootstrap templates (not bootstrap themes)
I stumbled upon this link
https://www.itophub.io/wiki/page?id=2_3_0%3Acustomization%3Aportal_howto_changebstheme
But the exact link is missing and has a token "Fix Me" .. :(
Any idea where I can get a good documentation if not some guidelines on
generating a bootstrap template for iTop?
Thanks,
Asif
Hi Asif,
If you want to change the template (layout) and not the theme (colors), then you can have a look at this extension on GitHub that shows how to make your own template and moves the navigation menu from the left side to the top of the screen.
Keep in mind that it was made for iTop 2.4, so some minors changes might be needed if you are on a more recent version.
Thanks Guillaume.
That extension seems to work "partly" on iTop 2.6.0.
However, I am having some problem trying to get documentation for changing the layout for the helpdesk user - not the end user portal. See attached screen-shot - I want to change the look and feel of section 1 and 2.
So, should i write extensions for the changing the "bricks" or write "templates" and separate twigs for each of these? I understand that the bricks is only for the end-user portal configuration. So where do I start for customizing the help-desk agent layouts.
It would be nice if there is a step-by-step description for something similar - if not, any pointers to documentations will be really helpful.
Thanks in advance
Hi Asif,
The helpdesk user interface that we comonly refer as the admin console cannot be modified with twig like in the end-user portal as it's made this an older technology. There is an API that allows you to add extras CSS / JS files, as well as some HTML markup, but you might not be able to change it too much.
Take a look at this API, through the $oPage object you will be able to add the said CSS / JS files (or directly in <style></em> / <em><script></em> tags). </p></style>
Hi Guillaume,
Thanks for your reply. I have seen that API - but as far as i could make out it would allow me only to add extra markup and/or css and js file. But it will not allow me to modify the existing markup (unless i do additional javascript dom modification - which will be extremely unpleasant).
So, if i need a completely new custom admin console - do you think if we build the UI and then connect it with REST/JSON to iTop will it work ? Does iTop expose all functionality through REST/JSON?
Thanks,
Asif
Hello,
iTop provides a REST APi, see https://www.itophub.io/wiki/page?id=2_6_0%3Aadvancedtopics%3Arest_json
In this case, it would be simpler to make a second portal instance dedicated to the helpdesk users IMHO. iTop supports several portals, each having its own settings and allowed profiles. So you could make a second one juste for the helpdesk. Check this sample extension on GitHub which guides you to add a new portal instance.
Building a new UI based on REST/JSON API would be time consuming and more over will not allow you to do all the features from the admin console.
What do you think?
So, if we create a second portal instance dedicated to helpdesk user, how do we route the login - for example, now when the "helpdesk agent" does a log in he/she is automatically routed to the admin console... so if we create a second portal, he/she will have to be routed always to the new portal - and everybody else too - other than the super-admin user who will be directed to the main admin console. So how do we ensure that everybody other than super-admin goes to the new instance of the portal? Or if we create a new instance of the portal every body will be redirected to the new instance instead of going to the main admin console?
If you look at the datamodel file of the extension, you will see there is a <portals></portals> part. This refers to all GUI of iTop, meaning both end-user portals and admin console.
In this tag, you can choose for each GUI, which profile will have access or not depending on their profiles. So you could restrict access or allow only Administrator profile.
You'll see that there is also a <rank></rank> part. When a user is allowed to access several GUI (eg. the admin console and a portal), it is automatically redirected to first GUI allowed for him regarding the rank. The user can then switch from a GUI to another.
So, if the helpdesk users should NEVER access the admin console, you should go with the profile restrictions solution. Otherwise, just play with the ranks.
You will find more information on these tags here under <portals></portals>
Last edit: Guillaume Lajarige 2019-02-26
That sounds really promising.
I will start exploring immediately this direction.
Thanks again for your patience and detailed explanation.
Ok. so I am making some progress. I could create a custom portal - played with ranks and it seems to be working so far.
Just to be sure i am on the right track - I want to share this user interface. This is what i want it to look when the agents log in.
Is this customization possible without touching the iTop core? Just with customizing the new portal through datamodel, and twig?
Another quick question -
in the datamodel definition for the extended portal i see the tags <templates> and <themes></themes></templates>
But I can't seem to find documentation on these tags.
Is these documented somewhere?
Hello,
There are some elements in the official wiki :
https://www.itophub.io/wiki/page?id=2_6_0%3Acustomization%3Aportal_xml
Also you can find exemples in our Combodo GitHub org : the sample-portal-* repo.
For example :
https://github.com/Combodo/sample-portal-alter-twig
https://github.com/Combodo/sample-portal-new-theme
https://github.com/Combodo/sample-portal-alter-template
https://github.com/Combodo/sample-portal-custom-css
Hi Asif,
Those tags are documented on the page Pierre pointed out (here) under Structure.
Hi Asif,
Yes you could do something similar! Changing the layout and aspect will require a lot a TWIG / CSS though.
Regarding the displayed bricks and their configuration, it's done through XML alteration of the Datamodel, so it is the right way to do it for future upgrades. :)