How do I modify .hbr template and CSS files for SmartDocs?

Not applicable

Greetings all,

I read the Apigee documentation on how to modify the SmartDocs look and feel here: http://apigee.com/docs/developer-services/content/using-smartdocs-document-apis. However, that page is confusing to me. What we want to do is modify the SmartDocs template and CSS files once, and have them apply to all SmartDocs models, not just one model. I see that there is a template (.hbr) file, CSS files and Javascript files that affect the SmartDocs template here: profiles/apigee/modules/custom/devconnect/smartdocs/css/smartdocs.css profiles/apigee/modules/custom/devconnect/smartdocs/local/css/v1/main.css profiles/apigee/modules/custom/devconnect/smartdocs/local/css/v2/main.css profiles/apigee/modules/custom/devconnect/smartdocs/local/css/v3/main.css profiles/apigee/modules/custom/devconnect/smartdocs/local/css/v4/main.css profiles/apigee/modules/custom/devconnect/smartdocs/local/css/v5/main.css profiles/apigee/modules/custom/devconnect/smartdocs/local/css/v6/main.css profiles/apigee/modules/custom/devconnect/smartdocs/local/js/v1/model.js profiles/apigee/modules/custom/devconnect/smartdocs/local/js/v2/model.js profiles/apigee/modules/custom/devconnect/smartdocs/local/js/v3/model.js profiles/apigee/modules/custom/devconnect/smartdocs/local/js/v4/model.js profiles/apigee/modules/custom/devconnect/smartdocs/local/js/v5/model.js profiles/apigee/modules/custom/devconnect/smartdocs/local/js/v6/model.js profiles/apigee/modules/custom/devconnect/smartdocs/templates/smartdocs.hbr However, if we change these files then they will be overwritten the next time Apigee does an upgrade because they are in the profiles/apigee folder rather than somewhere in our theme.

I see that we can check the Configuration->SmartDocts->Advanced Settings->Management API Override Settings->Use Local SmartDocs JS/CSS checkbox. But, where do the .HBR, JS and CSS files come from if we do that? There is no upload button so I’m not sure where in the folder tree we are supposed to put the .HBR, JS and CSS files or how we can ensure they over-ride or take the place of the default CSS or .HBR. Should we be providing complete JS/CSS files that are copied from the v6 versions, or only provide the parts of the CSS that we want changed in a different file, or how does this work and where should we put them? The other thing that is confusing to me is that there are six versions of the JS and CSS files. Which ones get loaded? i.e. Which ones should we start with to make changes from? Please advise. Thanks.

1 2 1,221
2 REPLIES 2

afaik, to update the template, you would just need to go here,

Smartdocs -> Model -> settings

749-screen-shot-2015-07-11-at-53413-pm.png

Here you will find a text area named 'Template', just paste your hbr tempalte here and save it, thats all - once you refresh / clear your cache - new template will take effect.

750-screen-shot-2015-07-11-at-53620-pm.png

I am not sure, how it works internally, but from a user perspective, this is the expected actions to be performed to update the template

Thanks,

Not applicable

Hi @Mukundha,

My Apigee portal UI looks different than yours. I've attached what I see. It does look like I can upload a .HBR file but I do not see a way to link to my own CSS files or Javascript. How would I do that? And, will uploading the .HBR file apply to all models (that's what we want).

Is this what Configuration->SmartDocs->Advanced Settings->Management API Override Settings->Use Local SmartDocs JS/CSS checkbox is for? If so where do I put the CSS and Javascript files?

755-smart-docs.jpg

Thanks