Developer Portal

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:

Explorer

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.

Portal Setup

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.

Canvas

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.

Page Properties

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:

• background color
• Left/Right margin 
• Top/Bottom margin
• Border Width
• Add Header (default is yes)
• Add Footer (default is yes)
• Border color

Widgets

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:

Rich Text Component

This component is for the rich text. You can type the content in the component box and format a part of text:

• bold, italic, underline and strikethrough
• Quote the text
• Add code blocks
• Create numbered or non-numbered bullet lists
• Indent or outdent text
• Specify the text size
• Create heading text for 6 levels or make the text as normal text
• Change the color of text or background of the text
• Specify the font type 
• Change the text alignment
• Create link for a part of the text
• Remove formatting for any part of the text

Link

To create links that point to any page on the portal or to an outside web page

Button

To create navigation action to a page on the portal or to an outside web page

Image

To add and adjust image on the page

Textbox 

To add and adjust a text box input

Access

To add the authorisation and authentication component. This will add a component that manages the user logins. 

The supported actions are

• Login by providing user name and password
• Register: A new user can register to the portal by providing email, name, last name and his/her organization name. The password for the user is generated and sent to the specified email id
• Change password by providing user email, current password and new password
• Reset password or forgot password functionality by providing user email and clicking on “Reset Password” button, the password can be reset to a randomly generated string which is sent to user’s email id

APIs 

This component adds the functionality to:

• Search published products which can be subscribed
• View the documentation of the APIs that are part of the products
• Request for subscription to products.
• Get the sample client code for the API in 5 programming languages
• Try the API from the same UI

Apps 

This component adds the functionality of managing developer apps. The developers can:

• View the apps that they have access to
• Create apps
• View the products subscribed for each of their apps
• View endpoints under each product within their apps