api-management-developer-portal icon indicating copy to clipboard operation
api-management-developer-portal copied to clipboard

Is it possible to edit pages via HTML/css instead of using visual drag-n-drop editor?

Open yarus opened this issue 2 years ago • 4 comments

Hi, I am new with Developer Portal. I am looking into configuring self-hosted Developer portal and trying to understand customization features.

The main question I have for now - is it really possible to manipulate with Developer portal pages directly via HTML instead of using visual editor?

yarus avatar Jul 25 '22 09:07 yarus

@yarus, thank you for opening this issue. We will triage it within the next few business days.

msftbot[bot] avatar Jul 25 '22 09:07 msftbot[bot]

@yarus, in managed version of the portal, the only way you use HTML/JS/CSS directly is within Custom HTML widget. In self-hosted portal, you have full access to the code and HTML templates.

azaslonov avatar Jul 26 '22 17:07 azaslonov

@yarus, in managed version of the portal, the only way you use HTML/JS/CSS directly is within Custom HTML widget. In self-hosted portal, you have full access to the code and HTML templates.

Thanks for reply,

Could you please provide more details how html templates for pages could be modified in self-hosted? I forked the Azure Portal repo and it looks like it is SPA driven by paperbits templates and knockout library. I never worked with paperbits before.

Trying to understand the thing. How am I suppose to modify for example Homepage, Api page directly? Without visual editor.

Thanks.

yarus avatar Jul 27 '22 08:07 yarus

@yarus, a page consists of widgets entirely, and how they reside and what properties they have comes from their configuration database. So technically you change the code of a widget, plus you can change page template (page.html file) in case you want to just add a script or a style. If you'd like to work with just with HTML/CSS/JS, the only recommendation I can think of is to generate the result website (using npm run publish command, providing respective settings into config.publish.json and config.runtime.json files, by default it will go to /dist/website folder) and modify it as needed.

azaslonov avatar Aug 02 '22 23:08 azaslonov