Home
%3CLINGO-SUB%20id%3D%22lingo-sub-758731%22%20slang%3D%22en-US%22%3EAzure%20API%20Management%20%3A%20New%2FCustom%20Tab%20in%20Developer%20Portal%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-758731%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSTRONG%3EUse%20case%3A%3CBR%20%2F%3E%3C%2FSTRONG%3EThe%20default%20developer%20portal%20of%20API%20Management%20service%20gives%20you%20five%20tabs%20(Home%2C%20Products%2C%20APIs%2C%20Application%20and%20Issues).%20But%20it%20has%20features%20where%20you%20can%20add%20more%20tabs%20as%20per%20your%20custom%20requirement.%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3E%3CSTRONG%3EHow%3F%3A%3CBR%20%2F%3E%3C%2FSTRONG%3EHere%20i%20have%20explained%20in%20easy%20steps%20to%20do%20the%20same.%3C%2FP%3E%0A%3CP%3EStep%201%3A%3CBR%20%2F%3ECreate%20new%20page%20from%20the%20content%20blade%20and%20click%20Publish%20Now.%20(remember%20the%20permanent%20link%20created)%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F123529i2D87F0CE455716B2%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Create%20new%20page%20and%20create%20the%20link.png%22%20title%3D%22Create%20new%20page%20and%20create%20the%20link.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%0A%3CP%3EStep%202%3A%3C%2FP%3E%0A%3CP%3EAdd%20a%20new%20menu%20and%20Save%3CBR%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20440px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F123523i124E517B4BB80BEC%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Add%20new%20menu.png%22%20title%3D%22Add%20new%20menu.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EStep%203%3A%3C%2FP%3E%0A%3CP%3ESelect%20the%20newly%20added%20menu%2C%20click%20show%20and%20add%20custom%20link.%3CBR%20%2F%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F123522iC68ABC8681C3ADF9%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Add%20custom%20link%20to%20the%20newly%20added%20menu.png%22%20title%3D%22Add%20custom%20link%20to%20the%20newly%20added%20menu.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EUrl%20is%20the%20last%20segment%20of%20the%20permanent%20link%20we%20created%20in%20Step%201%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20555px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F123521i4E574A7C9C7C1F2C%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Add%20name%20and%20the%20page%20url%20to%20the%20menu.png%22%20title%3D%22Add%20name%20and%20the%20page%20url%20to%20the%20menu.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EStep%204%3A%3C%2FP%3E%0A%3CP%3EGo%20to%20widgets%20blade%20and%20Add%20a%20new%20layer%2C%20if%20you%20want%20to%20show%20this%20tab%20only%20to%20authenticated%20user%20then%20add%20%22authenticated%22%20in%20the%20layer%20rule%20field%20or%20if%20you%20want%20to%20show%20it%20to%20all%20users%20then%20set%20it%20to%20%22true%22.%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F123520i2DF1CE3331B07F4A%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Add%20a%20new%20layer%201.png%22%20title%3D%22Add%20a%20new%20layer%201.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EStep%205%3A%3C%2FP%3E%0A%3CP%3ESelect%20the%20newly%20added%20layer%20in%20Step%204%20and%20click%20Show.%20Then%20come%20to%20navigation%20section%20and%20click%20Add.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F123524i88766DBAC89B02D1%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Add%20new%20menu%20to%20new%20layer.png%22%20title%3D%22Add%20new%20menu%20to%20new%20layer.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EStep%206%3A%26nbsp%3B%3C%2FP%3E%0A%3CP%3EChoose%20menu%20widget%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F123527i329282501F2A9F80%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Choose%20a%20widget%20-%20Menu.png%22%20title%3D%22Choose%20a%20widget%20-%20Menu.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EStep%207%3A%3C%2FP%3E%0A%3CP%3EAdd%20any%20Title%2C%20Name%20and%20choose%20the%20newly%20created%20menu%20under%20%22For%20Menu%22%20and%20%22Save%22%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20475px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F123528iC29D949FD1A24873%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22Map%20the%20widget%20and%20layer.png%22%20title%3D%22Map%20the%20widget%20and%20layer.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EStep%208%3A%3CBR%20%2F%3ENow%20go%20to%20developer%20portal%20and%20refresh%20you%20should%20see%20the%20new%20tab.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F123525i7F07FCE60DB16D03%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22after%20login.png%22%20title%3D%22after%20login.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3EStep%209%3A%3C%2FP%3E%0A%3CP%3ENow%20logout%20of%20your%20developer%20portal%2C%20you%20should%20see%20that%20the%20newly%20added%20tab%20is%20not%20visible.%3C%2FP%3E%0A%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F123526i7EF2FFEB181A38A9%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22after%20logout.png%22%20title%3D%22after%20logout.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%0A%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-TEASER%20id%3D%22lingo-teaser-758731%22%20slang%3D%22en-US%22%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F123526i7EF2FFEB181A38A9%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20alt%3D%22after%20logout.png%22%20title%3D%22after%20logout.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3C%2FLINGO-TEASER%3E%3CLINGO-LABS%20id%3D%22lingo-labs-758731%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EAzure%20API%20Management%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E
Microsoft

Use case:
The default developer portal of API Management service gives you five tabs (Home, Products, APIs, Application and Issues). But it has features where you can add more tabs as per your custom requirement.

 

How?:
Here i have explained in easy steps to do the same.

Step 1:
Create new page from the content blade and click Publish Now. (remember the permanent link created)

Create new page and create the link.png

 

Step 2:

Add a new menu and Save
Add new menu.png

Step 3:

Select the newly added menu, click show and add custom link.
Add custom link to the newly added menu.png

Url is the last segment of the permanent link we created in Step 1

Add name and the page url to the menu.png

Step 4:

Go to widgets blade and Add a new layer, if you want to show this tab only to authenticated user then add "authenticated" in the layer rule field or if you want to show it to all users then set it to "true".Add a new layer 1.png

Step 5:

Select the newly added layer in Step 4 and click Show. Then come to navigation section and click Add.

Add new menu to new layer.png

Step 6: 

Choose menu widget

Choose a widget - Menu.png

Step 7:

Add any Title, Name and choose the newly created menu under "For Menu" and "Save"

Map the widget and layer.png

Step 8:
Now go to developer portal and refresh you should see the new tab.

after login.png

Step 9:

Now logout of your developer portal, you should see that the newly added tab is not visible.

after logout.png