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
<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>
<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>
<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>
<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>
<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>
<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
<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.
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>