Skip to main content

Overriding default look and feel of GREG - 5.3.0

Following list explains what are the best approach for different use cases.

1 ) - You created a new asset type, and you need to change the look and feel of the details page in the listing page just for that new asset type.
  • To create a new asset type you need to login to the carbon console (username:admin, password:admin)
  • https://:9443/carbon/
  • Navigate to Extensions > Configure > Artifacts
  • Click "Add new Artifact" link at the bottom of the page.
  • By default in the "Generic Artifact" area "application" asset type is loaded. Note the shortName="applications" in the root node. "applications" is the name of the asset type.
  • Browse in to /repository/deployment/server/jaggeryapps/store/extensions/assets
  • Create a folder with name "applications"
     
  •  Now we can override the files in /repository/deployment/server/jaggeryapps/store/extensions/app/greg-store-defaults
     
  • Since we are overriding the details page we need to override the greg-store-defaults/themes/store/partials/asset.hbs

    Copy the above mentioned file in to the newly created asset extension /repository/deployment/server/jaggeryapps/store/extensions/assets/applications/themes/store/partials/asset.hbs
  • Do a visible change in the new hbs file.
  • View the asset extension is working by browsing to applications details page.
    Note: You need to create a new asset of the new type and log in to the store with admin credentials to view the new assets in store application.
  • Now you will be able to view the changes done.

2 ) -  Do the same change we have done in the above to an existing asset type ( restservice ).
  • We can't override the extensions up to (n) levels. Overriding supports only up to two levels. So we have to change the existing asset extension.
  • You can follow the same steps followed in the above scenario to override the asset details page of "restservice" details page.
3 ) - Change the look and feel of the whole store application.

  • ES store default theme ( css, hbs, js etc..) resides in /repository/deployment/server/jaggeryapps/store/themes/store


    They are override in GREG from "greg-store-defaults" extension. We can't override this extension by creating a new extension since the extension model does not supports ( n ) level overriding. So we have to modify the files in "greg-store-defaults" extension to achieve what we need.


Comments

Post a Comment

Popular posts from this blog

Projecting HTML Elements on a circle using Javascript

Recently I wonted to create a tree control with a different approach. The requirement was to represent a node tree with main node on the circle center and it's child nodes projected on a circle around it. This is what i wanted. My solution has 5 files prototype.js This is a handy javascript framework. You can download the latest version from there website ( www.prototypejs.org/download ). I am using this to simply handle the onload event in the page. circle.html script.js node-main-left.gif node-sub-left.gif The circle.html, prototype.js and the script.js files are in the root folder and the two images are inside a folder named “images”. This is how the html file looks(circle.html). <html> <head> <script src="prototype.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script> <script language="javascript" xml:space...
8 comments
Read more

Simple client side validation library

  Client side validation has never been easy.. Include jQuery and the validator.js < script src = " http://code.jquery.com/jquery-1.11.3.min.js " ></ script > < script src = " ../validate.js " ></ script > Simple validation < form id = " myForm " > < label >User Name < span class = " red-star " >*</ span > </ label > < input type = " text " name = " userName " class = " validate-required " /> < br /> < label >Password < span class = " red-star " >*</ span ></ label > < input type = " password " name = " password " class = " validate-required " /> < br /> < input type = " submit " value = " Login " /> </ form > ...
1 comment
Read more