Tutorial: Adding a custom block to a page other than the front page

You can customize the appearance of a page on your Developer Portal by adding a custom block. Blocks are boxes of content that are rendered into an area or region of a web page, such as the Products page or Apps page. Blocks can be displayed in regions, such as footer or sidebar, on your page.

Before you begin

You must have a Developer Portal enabled, and you must have administrator access to complete this tutorial. The tutorial Creating the Portal explains how to enable the portal if you have not already done so. The tutorial Adding a custom block to the front page explains how to add a custom block to the front page.

About this tutorial

In this tutorial, you create a custom block that contains extra guidance on application creation and registration, and add that custom block to the Apps page of your Developer Portal.

The Apps page displays like this before the block is added. A screenshot of the origianl front page

This tutorial takes you through creating a custom block, and configuring it to show on the Apps page.

  1. Log in to your Developer Portal as an administrator.
  2. If the administrator dashboard isn’t displayed, click Manage to display it.
  3. Navigate to Structure > Block layout > Add custom block.
  4. Enter App Info in the Block description.
  5. In the body area, click Source, then enter this HTML:
    <div class="tutorial_block_2">
<p>Before you can use an API, you must create an application. When you create an application you are provided with a client ID and client secret for the application. You must supply the client ID when you call an API that requires you to identify your application by using a client ID, or a client ID and client Secret.</p>
</div>

    Add custom block page

  6. To see a preview of the block click Source again.

    Showing new block

    Note: This block uses almost no inline-styling, instead it allows your theme to decide how it is rendered. The advantage of this set up is that you can easily change the rendering without modifying existing content in the database. Any styling that is required can be added to a custom theme. For more information, see Tutorial: Creating a custom theme for the Developer Portal.
  7. Click Save.
  8. Enter Creating an App in the Title box, keep the Display title selected.Showing configure block page
  9. Click Pages in the Visibility list.
  10. Enter /application in the Pages text area, keep the Show for the listed pages selected.
  11. Select Secondary from the Region drop-down menu.
  12. Click Save block.
  13. Click Save blocks.

What you did in this tutorial

The Apps page now has an additional block with a guidance message.

App page showing new custom block

What to do next

Instead of using inline styling like that provided in the html, adopt best practice by adding class selectors and developing a custom theme. By default this block is English, so you might want to consider adding translated versions.