Portal Manager component in Syvizo API Platform is a “no code” user interface to create rich Developer Portal for excellent developer experience. You can create pages and add user interface components on pages using simple drag and drop actions. Each UI component can be customised and its appearance, size and position on the screen can be changed.
To create or manage the portal, log in to Syvizo API Platform and select “API Collaborator”. On the dashboard, click on “Portal Developer” icon
You will be taken to the portal manager component.
The component has following parts:
This shows the structure of the portal. The structure is a file and folder like structure. The groups can be expanded by clicking on them and each group can contain one or more groups and pages.
The pages are the webpages that will be shown on screen and UI components can be added to them. The groups are an easy way to manage pages for any classification you want to make.
To add a group or a page, click on “Add” button in the explorer section. A dialog box will open where you can specify whether you want to create a group or a page and specify the name of the group or page. There is a drop down box to select the location of the group or page you want to create from the list of existing groups. After you have specified the required fields, click on “Add” to create the group or page.
Once created, you can click on any group to expand it and go to the page you want to create or edit.
You can also remove a page or a group by clicking on it to select and click “Delete” button. Do note that the delete action cannot be “un-done”.
When you create the portal for the first time, you will notice that the basic structure is created with some pages and groups present.
To effectively work with portal manager, it is important to understand the structure and meaning of some pages and groups.
As the names suggest, the pages named “header” and “footer” are special pages that will be added to each page of the portal as header and footer. These pages cannot be removed. However you can choose to not add header and footer on any page in the page properties.
The pages at the root level and in 'public' group are public and accessible to users without login. If you want to create any content pages that you want to make accessible to users without login, you should put them in root or under 'public' folder. You can create sub-groups under public folder and put the content pages in those sub-groups. As long as the pages are under 'public' folders they will be accessible to portal users without the need to login into the portal.
The pages under other groups will be accessible only to the logged in users. More details on user login management can be found in the Login Widget section.
The portal setup section below “Explorer” is for configurations that apply to the portal.
Show Left Explorer: Selecting this will make the explorer visible to the resulting portal after the portal is saved. This acts as 'site navigation menu' for the developer portal. At the runtime, the menu will only show the content pages and not pages like 'header' and 'footer' and these will be added to the content pages as header and footer.
Show Page Index: Selecting this will add a page index on the right side of the page. The page index shows the nested heading structure of page. The headings in the page text becomes anchors and user can navigate on the pages by clicking on them.
Explorer Font: This is to set the font properties of the explorer
Page Index Font: This is to set the font properties of the page index
Header Height: Height of the header on the content pages
Header always visible: If this is selected, the header will always show on the top of the screen even when the screen is scrolled. The rest of the screen will be scrolled normally.
Footer always visible: If this is selected, the footer will always show on the bottom of the screen even when the screen is scrolled. The rest of the screen will be scrolled normally.
The middle part of the screen is canvas. When you click on the pages on the left explorer menu, the pages contents will be loaded on the canvas and can be edited.
The expand and shrink buttons can be used to increase or decrease the page height respectively. Page height cannot be reduced to be less than the minimum size needed for the components available on the page:
page height respectively. Page height cannot be reduced to be less than the minimum size needed for the components available on the page.
To configure the page appearance, you can right click on the canvas. This will open the “Page Properties” context menu. The properties for page can be configured from this menu. The changes will apply only to the page this is configured on. The available properties are:
The right pane of the screen is a collection of UI Widgets. These are the pre-configured components that can be dragged and dropped on the canvas.
The position of the components can be adjusted by dragging them. The size of the components can be changed by dragging the handles of the components. Handles are the small gray dots on the middle of the right border of the component for width adjustment and on the middle of the bottom border for the height adjustment.
When you reach for the handles, the cursor pointer will change according to the adjustment:
Width Adjustment:
Height Adjustment:
You can change the other properties for components by right clicking on the component.
The available components are:
This component is for the rich text. You can type the content in the component box and format a part of text:
To create links that point to any page on the portal or to an outside web page
To create navigation action to a page on the portal or to an outside web page
To add and adjust image on the page
To add and adjust a text box input
To add the authorisation and authentication component. This will add a component that manages the user logins.
The supported actions are
This component adds the functionality to:
This component adds the functionality of managing developer apps. The developers can:
Contact
