Navigation Controls
Pagination
<nav class="adb-pagination"> <a class="adb-pagination--button adb-pagination--button__prev"></a> <a class="adb-pagination--button adb-pagination--button__first">1</a> <a class="adb-pagination--button">2</a> <span class="adb-pagination--current">3</span> <a class="adb-pagination--button">4</a> <a class="adb-pagination--button adb-pagination--button__middle">5</a> <span class="adb-pagination--ellipsis"></span> <a class="adb-pagination--button adb-pagination--button__last">90</a> <a class="adb-pagination--button adb-pagination--button__next"></a> </nav>
<nav class="adb-pagination"> <a class="adb-pagination--button adb-pagination--button__prev adb-is-disabled"></a> <span class="adb-pagination--current">1</span> <a class="adb-pagination--button">2</a> <a class="adb-pagination--button">3</a> <a class="adb-pagination--button">4</a> <a class="adb-pagination--button adb-pagination--button__middle">5</a> <span class="adb-pagination--ellipsis"></span> <a class="adb-pagination--button adb-pagination--button__last">90</a> <a class="adb-pagination--button adb-pagination--button__next"></a> </nav>
<nav class="adb-pagination"> <a class="adb-pagination--button adb-pagination--button__prev"></a> <a class="adb-pagination--button adb-pagination--button__first">1</a> <span class="adb-pagination--ellipsis"></span> <a class="adb-pagination--button">86</a> <a class="adb-pagination--button">87</a> <a class="adb-pagination--button">88</a> <a class="adb-pagination--button">89</a> <span class="adb-pagination--current">90</span> <a class="adb-pagination--button adb-pagination--button__next adb-is-disabled"></a> </nav>
Version 1
<nav class="adb-pagination"> <a class="adb-pagination--button adb-pagination--button__prev"></a> <a class="adb-pagination--button adb-pagination--button__first">1</a> <a class="adb-pagination--button">2</a> <span class="adb-pagination--current">3</span> <a class="adb-pagination--button">4</a> <a class="adb-pagination--button adb-pagination--button__middle">5</a> <span class="adb-pagination--ellipsis"></span> <a class="adb-pagination--button adb-pagination--button__last">90</a> <a class="adb-pagination--button adb-pagination--button__next"></a> </nav>
Pagers
<nav class="adb-pager"> <div class="adb-pager--pagination"> <span class="adb-pager--pagination_item adb-is-active"></span> <span class="adb-pager--pagination_item"></span> <span class="adb-pager--pagination_item"></span> <span class="adb-pager--pagination_item"></span> </div> </nav>
<nav class="adb-pager"> <button class="adb-pager--item adb-pager--button__prev" type="button"> <i class="adb-icon__arrow_left"></i> Previous </button> <button class="adb-pager--item adb-pager--button__next" type="button"> Next <i class="adb-icon__arrow_right"></i> </button> </nav>
<nav class="adb-pager"> <button class="adb-pager--item adb-pager--button__prev adb-button__square_small" type="button"> <i class="adb-icon__arrow_left"></i> </button> <div class="adb-pager--pagination adb-pager--item"> <span class="adb-pager--pagination_item adb-is-active"></span> <span class="adb-pager--pagination_item"></span> <span class="adb-pager--pagination_item"></span> <span class="adb-pager--pagination_item"></span> </div> <button class="adb-pager--item adb-pager--button__next adb-button__square_small" type="button"> <i class="adb-icon__arrow_right"></i> </button> </nav>
<nav class="adb-pager"> <button class="adb-pager--item adb-pager--button__prev adb-button__square_small" type="button"> <i class="adb-icon__arrow_left"></i> </button> <div class="adb-pager--caption adb-pager--item">1 of 3</div> <button class="adb-pager--item adb-pager--button__next adb-button__square_small" type="button"> <i class="adb-icon__arrow_right"></i> </button> </nav>
Count Filter
<menu> <div class="adb-js-dropdown adb-dropdown adb-dropdown__inset adb-dropdown__small"> <select> <option>25 Results</option> <option>50 Results</option> <option>100 Results</option> <option>All Results</option> </select> </div> </menu>
Button Toggles
Menu
<menu class="adb-toggle_buttons" data-toggle="buttons-radio"> <button class="adb-toggle_buttons--button active" type="button">Option 1</button> <button class="adb-toggle_buttons--button" type="button">Option 2</button> <button class="adb-toggle_buttons--button" type="button">Option 3</button> <button class="adb-toggle_buttons--button" type="button">Option 4</button> </menu>
<menu class="adb-toggle_buttons" data-toggle="buttons-radio"> <button class="adb-toggle_buttons--button adb-button__small active" type="button">Option 1</button> <button class="adb-toggle_buttons--button adb-button__small" type="button">Option 2</button> <button class="adb-toggle_buttons--button adb-button__small" type="button">Option 3</button> <button class="adb-toggle_buttons--button adb-button__small" type="button">Option 4</button> </menu>
Single Button
<button class="adb-toggle_button" data-label-active="Hide Settings" data-label-init="Show Settings" data-target="#" data-toggle="panel" type="button"> Show Settings </button>
Tags
<div class="adb-tag"> <span class="adb-tag--text"> sed quia non numquam eius </span> <a class="adb-tag--remove" href="#" title="Remove"></a> </div> <div class="adb-tag"> <span class="adb-tag--text"> modi tempora incidunt ut labore </span> <a class="adb-tag--remove" href="#" title="Remove"></a> </div> <div class="adb-tag"> <span class="adb-tag--text"> et dolore magnam aliquam quaerat </span> <a class="adb-tag--remove" href="#" title="Remove"></a> </div> <div class="adb-tag"> <span class="adb-tag--text"> voluptatem ut enim ad minima </span> <a class="adb-tag--remove" href="#" title="Remove"></a> </div> <div class="adb-tag"> <span class="adb-tag--text"> veniam quis nostrum exercitationem ullam </span> <a class="adb-tag--remove" href="#" title="Remove"></a> </div> <div class="adb-tag"> <span class="adb-tag--text"> corporis nemo enim ipsam voluptatem </span> <a class="adb-tag--remove" href="#" title="Remove"></a> </div> <div class="adb-tag"> <span class="adb-tag--text"> quia voluptas sit suscipit laboriosam </span> <a class="adb-tag--remove" href="#" title="Remove"></a> </div> <div class="adb-tag"> <span class="adb-tag--text"> nisi ut aliquid ex ea </span> <a class="adb-tag--remove" href="#" title="Remove"></a> </div> <div class="adb-tag"> <span class="adb-tag--text"> commodi consequatur quis autem vel </span> <a class="adb-tag--remove" href="#" title="Remove"></a> </div> <div class="adb-tag"> <span class="adb-tag--text"> eum iure reprehenderit qui in </span> <a class="adb-tag--remove" href="#" title="Remove"></a> </div>
<div class="adb-container adb-tags"> <div class="adb-tag"> <span class="adb-tag--text"> id est laborum et dolorum </span> <a class="adb-tag--remove" href="#" title="Remove"></a> </div> <div class="adb-tag"> <span class="adb-tag--text"> fuga et harum quidem rerum </span> <a class="adb-tag--remove" href="#" title="Remove"></a> </div> <div class="adb-tag"> <span class="adb-tag--text"> facilis est et expedita distinctio </span> <a class="adb-tag--remove" href="#" title="Remove"></a> </div> <div class="adb-tag"> <span class="adb-tag--text"> nam libero tempore cum soluta </span> <a class="adb-tag--remove" href="#" title="Remove"></a> </div> <div class="adb-tag"> <span class="adb-tag--text"> nobis est eligendi optio cumque </span> <a class="adb-tag--remove" href="#" title="Remove"></a> </div> <div class="adb-tag"> <span class="adb-tag--text"> nihil impedit quo porro quisquam </span> <a class="adb-tag--remove" href="#" title="Remove"></a> </div> <div class="adb-tag"> <span class="adb-tag--text"> est qui minus id quod </span> <a class="adb-tag--remove" href="#" title="Remove"></a> </div> <div class="adb-tag"> <span class="adb-tag--text"> maxime placeat facere possimus omnis </span> <a class="adb-tag--remove" href="#" title="Remove"></a> </div> <div class="adb-tag"> <span class="adb-tag--text"> voluptas assumenda est omnis dolor </span> <a class="adb-tag--remove" href="#" title="Remove"></a> </div> <div class="adb-tag"> <span class="adb-tag--text"> repellendus temporibus autem quibusdam et </span> <a class="adb-tag--remove" href="#" title="Remove"></a> </div> </div>
Videos
<div class="adb-video"> <img class="adb-video--screenshot" src="../../images/content/sendgrid-preview.png?1567620427" /> </div>
Step Progress
Header Step Progress and Footer Step Flow are supposed to work in combination on the same page.
- 1. Order Information
- 2. Payment Information
- 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>
Footer Step Flow
Bottom placed step flow that permanently floats on the bottom of the page. The Footer Step Flow overlays the Page Footer. (remove inline CSS)
<div class="adb-footer-steps--container"> <div class="adb-footer-steps" style="position: inherit;"> <div class="adb-layout-default"> <nav class="adb-pager"> <div class="adb-pager--item"> <a class=" adb-pager--button__prev adb-button adb-button__medium adb-button__neutral" href="#"><i class="adb-icon__arrow_left"></i> Back </a> <a class="adb-pager--item adb-button adb-button__medium adb-button__secret" href="#">Cancel </a> </div> <div class="adb-pager--pagination adb-pager--item"> <p>Step 1</p> </div> <a class="adb-pager--item adb-button adb-button__medium adb-button__emphasis" href="#">Submit </a> </nav> </div> </div> </div> <div class="adb-footer-steps--container-anchor"></div>
Step Points
Like the Step Progress the Step Points guide the user through a flow process. Step Points are preferable for flows on mobile devices.
- Configure Order
- Payment + Shipping
- Review + Buy
<nav class="adb-points"> <ul class="adb-points--items"> <li class="adb-points--item adb-points--item__current"> <span class="adb-points--content">Configure Order</span> </li> <li class="adb-points--item"> <span class="adb-points--content">Payment + Shipping</span> </li> <li class="adb-points--item"> <span class="adb-points--content">Review + Buy</span> </li> </ul> </nav>
- Configure Order
- Payment + Shipping
- Review + Buy
<nav class="adb-points"> <ul class="adb-points--items"> <li class="adb-points--item adb-points--item__completed"> <span class="adb-points--content">Configure Order</span> </li> <li class="adb-points--item adb-points--item__completed"> <span class="adb-points--content">Payment + Shipping</span> </li> <li class="adb-points--item adb-points--item__current"> <span class="adb-points--content">Review + Buy</span> </li> </ul> </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 adb-step_section__last"> <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>