NOTE: Some aspects of this product are in Beta. The hybrid installation options are GA. To join the Beta program, reach out to your Apigee representative.

Developing portal content using the page editor

Using the page editor, you define your portal content using Markdown or HTML.

Exploring the page editor

Access the page editor by clicking the name of a page when viewing the list of pages, as described in Manage the pages in your portal.

Page editor

As highlighted in the previous figure, the page editor enables you to:

Editing content in the page editor

Markdown is a simple formatting language that uses plain text markup that is both easy to read and write. Its syntax is specified using punctuation characters. Markdown is converted to HTML before rendering in your browser.

The quick edit toolbar at the top of the page editor provides shortcuts for applying formats (such as bold, italic, and so on) or inserting Markdown tags (such as lists, images, links, and so on). For a quick summary of Markdown syntax, click Markdown icon in the quick edit toolbar to view the Markdown syntax quick reference.

To undo or redo the last edit, click Command-z or Command-Shift-z, respectively.

Markdown is recommended if you want to keep your formatting workflow simple. However, it is not intended to replace HTML. There is a wide range of formatting you can do in HTML that you cannot do in Markdown. For example, you can specify a CSS class for an element in HTML; you cannot do this in Markdown:

   <p class="class1">

You can insert HTML anywhere within the content body by simply entering the HTML tags.

For information about HTML tags, see the HTML5 specification.

Adding angular material components

Angular material provides a state-of-the-art UI component library. Angular material components enable you to quickly easily construct consistent, responsive, and accessible user interfaces utilizing modern design principles.

The following angular material components are provided out-of-the-box for use with the developer portal.

Component Example
Buttons The following code creates a rectangular button with elevation.
<a mat-raised-button 
   Quick Start

The following code creates a circular button with a transparent background that includes the warning icon. The color of the button is defined using the warn color palette.

<button mat-icon-button
   <mat-icon aria-label="Example warning">warning</mat-icon>
Card The following code creates a card. The card includes button and icon components, as well as heading and body text. The color of the button is defined using the primary color palette.

      <p class="home-page-card-content-text">
         Learn about and try our APIs.
      <button mat-button>
          View APIs
Icon The following code creates a checkmark icon. For a complete list of icons that are supported, see Material Design - Icons.
Toolbar The following code creates a simple toolbar with text and a shopping cart icon.
<mat-toolbar color="primary">
   <span>My Store</span>
   <span class="space-buffer"></span>

Managing the audience for a page in your portal

Manage the audience for a page in your portal by allowing access to:

  • All users
  • Registered users only

To manage the audience for a page in your portal:

  1. Click Manage adjacent to the audience in the right pane of the page editor.
  2. Select one of the following options:

    • Anonymous users to allow all users to view the page.
    • Registered users to allow only registered users to view the page.
  3. Click Apply.

Previewing portal content

To preview the portal content, click Preview in page editor toolbar. Navigate through other pages in your portal to preview the content, as desired.

Publishing portal content

To publish portal content, click Publish in the right pane. To unpublish the portal content, click Unpublish in the right pane. See also Publishing your portal content.

Deleting a page

To delete a page from the portal editor, click Delete in the right pane of the page editor. You are prompted to confirm the operation.