• Acme Marketplace
  • Core
  • Display
  • Navigate
  • Modify
  • Arrange
  • Prototype
    • Release Notes
    • CSS/SASS Stats
    • Preview All Components
Base by AppDirect

Display

Communicate specialized information

Alerts & Messages
Text Patterns
Tooltips
Ratings
Badges
Status & Progress
Avatars & Logos
App Tiles
Numbers & Pricing

Status & Progress

Statuses

Example Class Name Code
Active .adb-status__active
<span class="adb-status adb-status__active">
  <span class="adb-status--gem"></span>
  Active
</span>
Pending .adb-status__pending
<span class="adb-status adb-status__pending">
  <span class="adb-status--gem"></span>
  Pending
</span>
Failed .adb-status__error
<span class="adb-status adb-status__error">
  <span class="adb-status--gem"></span>
  Failed
</span>
Canceled .adb-status__disabled
<span class="adb-status adb-status__disabled">
  <span class="adb-status--gem"></span>
  Canceled
</span>

Abbreviated

If there is not enough space for the status word label, include it as a tooltip on the status gem.

<span class="adb-status adb-status__error">
  <span class="adb-status--gem" data-toggle="tooltip" title="Failed"></span>
</span>
<span class="adb-status adb-status__pending">
  <span class="adb-status--gem" data-toggle="tooltip" title="Pending"></span>
</span>
<span class="adb-status adb-status__active">
  <span class="adb-status--gem" data-toggle="tooltip" title="Success"></span>
</span>
<span class="adb-status adb-status__disabled">
  <span class="adb-status--gem" data-toggle="tooltip" title="Disabled"></span>
</span>

Loading Icons

<button class="adb-button__large" disabled type="button">
  <span>Run Test</span>
  <span class="adb-loading">
    <span class="adb-loading--text">Loading ...</span>
  </span>
</button>
<button disabled type="button">
  <span>Run Test</span>
  <span class="adb-loading">
    <span class="adb-loading--text">Loading ...</span>
  </span>
</button>
<button class="adb-button__small" disabled type="button">
  <span>Run Test</span>
  <span class="adb-loading">
    <span class="adb-loading--text">Loading ...</span>
  </span>
</button>

Colors

Example Class Name Code
Loading ... .adb-loading
<span class="adb-loading">
  <span class="adb-loading--text">Loading ...</span>
</span>
Loading ... .adb-loading__light
<span class="adb-loading adb-loading__light">
  <span class="adb-loading--text">Loading ...</span>
</span>

See Buttons for loading states in buttons.

Progress and Usage Meters

Attribute Description
data-percent Format is "<#>", where # is a number between 0 and 100.
data-state Optional Possible values include empty, low, full and error.

Sizes

Example Class Code
65%
.adb-js-meter.adb-meter
<div class="adb-js-meter adb-meter" data-percent="65" data-toggle="tooltip" title="65%">
  <span class="adb-meter--percent">
    65%
  </span>
</div>
65%
.adb-meter__small
<div class="adb-js-meter adb-meter adb-meter__small" data-percent="65" data-toggle="tooltip" title="65%">
  <span class="adb-meter--percent">
    65%
  </span>
</div>

States

0%
<div class="adb-js-meter adb-meter adb-meter" data-percent="0" data-state="empty" data-toggle="tooltip" title="0%">
  <span class="adb-meter--percent">
    0%
  </span>
</div>
10%
<div class="adb-js-meter adb-meter" data-percent="10" data-state="low" data-toggle="tooltip" title="Low">
  <span class="adb-meter--percent">
    10%
  </span>
</div>
50%
<div class="adb-js-meter adb-meter" data-percent="50" data-state="loading" data-toggle="tooltip" title="Pending">
  <span class="adb-meter--percent">50%</span>
</div>
100%
<div class="adb-js-meter adb-meter" data-percent="100" data-state="full" data-toggle="tooltip" title="Full">
  <span class="adb-meter--percent">
    100%
  </span>
</div>
100%
<div class="adb-js-meter adb-meter" data-percent="100" data-state="unlimited" data-toggle="tooltip" title="Unlimited">
  <span class="adb-meter--percent">
    100%
  </span>
</div>
0%
<div class="adb-js-meter adb-meter" data-percent="0" data-state="error" data-toggle="tooltip" title="You need to add more users">
  <span class="adb-meter--percent">
    0%
  </span>
</div>

Step Progress

  1. 1. Order Information
  2. 2. Payment Information
  3. 3. Confirm Order
<nav class="adb-steps">
  <ol class="adb-steps--items">
    <li class="adb-steps--item">
      <span class="adb-steps--content">1. Order Information</span>
    </li>
    <li class="adb-steps--item adb-steps--item__current">
      <span class="adb-steps--content">2. Payment Information</span>
    </li>
    <li class="adb-steps--item">
      <span class="adb-steps--content">3. Confirm Order</span>
    </li>
  </ol>
</nav>

Step Sections

1 Make sure your OpenID consumer reads the {openid} parameters

From now on, each AppDirect-powered marketplace will have its own OpenID provider instead of relying on www.appdirect.com. You will need to remove the hardcoded URL of AppDirect's OpenID provider in your consumer and replace it with the {openid} placeholder in your configuration to know which provider to query.

Your consumer should accept:

http://www.example.com/login?openid_identifier={openid}

2 Update your event listener URLs

The events can now be triggered on any AppDirect-powered marketplace. Instead of passing the event {token} , we're now passing the {eventUrl} , so you'll need to update the logic in your event listener accordingly. When receiving a call on one of your event listener URLs, you'll need to:

  • Verify the OAuth signature of the call to validate that it comes from an authorized AppDirect-powered marketplace
  • Read the {eventUrl} (instead of reading the event {token} )
  • Perform a GET to this URL signed with your OAuth credentials
  • Process the event as appropriate
  • Return a valid response to the event notification

Example URL before:

http://www.example.com/foo?token={token}

Example URL after:

http://www.example.com/foo?url={eventUrl}

3 Update the OpenID URLs for your existing users

OpenID data for your current marketplace users must be updated in your product's database.

Update OpenID data via SQL

If you use a SQL-based database, the form below will generate SQL script that will update the OpenID for your existing users. Input the name of the table that stores these OpenIDs and the name of the column in which they are stored, and then execute the SQL on your database.

Generate SQL to update OpenID URLs for existing users

Update OpenID data via manual export

Alternatively, you can export the user account information we have collected and manually update their OpenID values:

4 Update Integration Report

Let us know you have completed this step of the integration by checking off the "Migrate to the distributed API" item in your Integration Report.

<section class="adb-step_section">
  <h3>
    <span class="adb-step_section--number">1</span>
    Make sure your OpenID consumer reads the
    <code>{openid}</code>
    parameters
  </h3>
  <p>
    From now on, each AppDirect-powered marketplace will have its own OpenID provider instead of relying on
    <a>www.appdirect.com.</a>
    You will need to remove the hardcoded URL of AppDirect's OpenID provider in your consumer and replace it with the
    <code>{openid}</code>
    placeholder in your configuration to know which provider to query.
  </p>
  <p>Your consumer should accept:</p>
  <pre>http://www.example.com/login?openid_identifier={openid}</pre>
</section>
<section class="adb-step_section">
  <h3>
    <span class="adb-step_section--number">2</span>
    Update your event listener URLs
  </h3>
  <p>
    The events can now be triggered on any AppDirect-powered marketplace. Instead of passing the event
    <code>{token}</code>
    , we're now passing the
    <code>{eventUrl}</code>
    , so you'll need to update the logic in your event listener accordingly. When receiving a call on one of your event listener URLs, you'll need to:
  </p>
  <ul>
    <li>Verify the OAuth signature of the call to validate that it comes from an authorized AppDirect-powered marketplace</li>
    <li>
      Read the
      <code>{eventUrl}</code>
      (instead of reading the event
      <code>{token}</code>
      )
    </li>
    <li>Perform a GET to this URL signed with your OAuth credentials</li>
    <li>Process the event as appropriate</li>
    <li>Return a valid response to the event notification</li>
  </ul>
  <p>Example URL before:</p>
  <pre>http://www.example.com/foo?token={token}</pre>
  <p>Example URL after:</p>
  <pre>http://www.example.com/foo?url={eventUrl}</pre>
</section>
<section class="adb-step_section">
  <h3>
    <span class="adb-step_section--number">3</span>
    Update the OpenID URLs for your existing users
  </h3>
  <p>OpenID data for your current marketplace users must be updated in your product's database.</p>
  <h4>Update OpenID data via SQL</h4>
  <p>If you use a SQL-based database, the form below will generate SQL script that will update the OpenID for your existing users. Input the name of the table that stores these OpenIDs and the name of the column in which they are stored, and then execute the SQL on your database.</p>
  <form class="adb-form">
    <fieldset class="adb-container">
      <div class="adb-container_header">
        <h3 class="adb-container_header--title adb-container_header--item">
          <legend>Generate SQL to update OpenID URLs for existing users</legend>
        </h3>
      </div>
      <div class="adb-container_content">
        <div class="adb-form--field">
          <label for="table_name">
            SQL Table Name
          </label>
          <input id="table_name" type="text">
        </div>
        <div class="adb-form--field">
          <label for="column_name">
            SQL Column Name
          </label>
          <input id="column_name" type="text">
        </div>
        <div class="adb-form--field">
          <label class="adb-selector adb-js-checkbox" for="interactive-endpoint">
            <span class="adb-selector--input">
              <input checked id="interactive-endpoint" type="checkbox">
            </span>
            <span class="adb-selector--value">
              Show Comments
            </span>
          </label>
        </div>
      </div>
      <div class="adb-container_footer adb-container_footer__actionable">
        <button class="adb-button__inset" type="button">
          Generate SQL
        </button>
      </div>
    </fieldset>
  </form>
  <h4>Update OpenID data via manual export</h4>
  <p>Alternatively, you can export the user account information we have collected and manually update their OpenID values:</p>
  <menu class="adb-toolbar">
    <button class="adb-toolbar--item" type="button">
      Export Development (Test) Users
    </button>
    <button class="adb-toolbar--item" type="button">
      Export Production Users
    </button>
  </menu>
</section>
<section class="adb-step_section">
  <h3>
    <span class="adb-step_section--number">4</span>
    Update Integration Report
  </h3>
  <p>
    Let us know you have completed this step of the integration by checking off the "Migrate to the distributed API" item in your
    <a href="../../prototype/developer/editor/integration_report.html">Integration Report.</a>
  </p>
  <menu class="adb-toolbar">
    <button class="adb-button__primary adb-toolbar--item" type="button">
      Update Integration Report
    </button>
    <button class="adb-toolbar--item" type="button">
      Edit Integration
    </button>
  </menu>
</section>
  • Framework
  • Display
  • Status & Progress
  • Powered by AppDirect © 2009–2014
  • Help Center
  • Terms & Conditions
  • Contact
  • Call us toll-free: (877) 404-APPS
    Hide
    4
    1366 × 768
    10.51%
    9
    1024 × 768
    4.02%
    3
    1280 × 800
    11.08%
    1
    1440 × 900
    16.09%
    7
    1600 × 900
    5.59%
    6
    1280 × 1024
    5.77%
    5
    1680 × 1050
    7.48%
    2
    1920 × 1080
    15.99%
    8
    1920 × 1200
    5.39%
    10
    2560 × 1440
    3.23%