Re: UI customization

Mon, 09 Nov 2015 04:29:26 -0800

From my opinion better way is to write a plugin: http://docs.cloudstack.apache.org/en/latest/plugins.html#how-to-write-a-plugin-overview and follow UI customization guide: http://support.citrix.com/servlet/KbServlet/download/38315-102-714564/CloudPlatform_4.5_User_Interface_Customization.pdf
Doing direct changes to cloudStack.js that are not contributed back to community is guaranteed way to have problems after updates. You will have to merge your code with mainstream all the time. 


Another way is to implement your own interface based on CS REST API. 
Doing that for just 1 button is overkill for sure, but such changes will 
never end as soon as you start to customize. Think about it. The easiest 
way is not always the best one.


Vadim.

On 2015-11-09 13:58, Kshitij Kansal wrote:


Hi,

You can find the scripts at the location

"client/target/generated-webapp/scripts/". Make changes to 
cloudstack.js

here.

*Note: *First remove the corresponding gz file(in your case
cloudstack.js.gz) otherwise the changes won't reflect.


*The changes in generated-webapps are not saved and tracked in git. So 
make
sure to copy your changes to actual scripts (in ui/scripts) before 
finally
rebuilding the project. *The changes made this way are directly 
reflected

by refreshing the page.


PS: Not sure if its the correct way to develop but it works :). Once 
again,
make sure to copy your changes back to correct scripts before building 
the

project.

Regards,
Kshitij


On Mon, Nov 9, 2015 at 12:34 PM, Wei ZHOU <ustcweiz...@gmail.com> 
wrote:


I guess you worked on old version before.
in 4.6, something changed. you might compress cloudStack.js to get
cloudStack.js.gz as well.

2015-11-08 15:05 GMT+01:00 Илья Толстихин <inosi...@gmail.com>:

Hi all,

Could please help with the process of UI customization:

I have CloudStack 4.6.0 built from the source.
I want to add a custom button to the WebUI menu.
In file ui/scripts/cloudStack.js I added my button into sections array

*sections: {*
* /***
* * Dashboard*
* */*
* dashboard: {},*
* instances: {},*
* affinityGroups: {},*
* storage: {},*
* network: {},*
* templates: {},*
* events: {},*
* projects: {},*
* accounts: {},*

* domains: {}, //domain-admin and root-admin only*

* regions: {}, //root-admin only*
* system: {}, //root-admin only*
* 'global-settings': {}, //root-admin only*
* configuration: {}, //root-admin only*
* plugins: {},*
* test: {*
* title: 'TestSection',*
* id: 'TestSection',*
* show: function(args){*
* var div = document.createElement('div');*
* div.innerHTML = "<h1>Test section</h1>";*
* return div;*
* }*
* }*
* }*

and in sectionPreFilter array

*sectionPreFilter: function(args) {*
* var sections = [];*

* if (isAdmin()) {*
* sections = ["dashboard", "instances", "storage",
"network", "templates", "accounts", "domains", "events", "system",
"global-settings", "configuration", "projects", "regions",
"affinityGroups", "test"];*


After building the project, the button was added to the menu, but when 
I

edit cloudStack.js and restart jetty UI doesn't change, any changes are
applied only after the full project rebuild with command mvn
-Pdeveloper,systemvm -DskipTests clean install.
Jetty version 6.1.26

How to apply changes without rebuilding project?
And is it possible to apply it without restart Jetty?






















					Reply via email to