Storified Web Part Documentation - 1000Memories/Documentation GitHub Wiki

This page explains how to implement the "storified" success message web parts for Bandido sharing. This includes the merge success message as well as the side panel success message:

screen shot 2013-08-02 at 3 18 47 pm 2 copy

For general web part implementation details including prerequisites and dependencies, see Web Part Documentation page.

URLs

Styles

The storified web part supports two styles which can be specified using the style= query param:

Web part region IDs

Region CSS ID can be specified using the region= GET param to allow for multiple bandido web parts on the same page. Important: region CSS IDs must be unique per page. If you have multiple web parts embedded per page (e.g. side panel) ensure that there are no conflicts with the region IDs.

Region HTML data attributes

The following specifies data attributes that you should add for the region <div> of the web part.

Search records

  • data-tree-id the tree ID that the search record is attached to
  • data-person-id the person ID that the search record is attached to
  • data-person-given-name the given name of the person
  • data-person-surname the surname of the person
  • data-person-gender the gender of the person (should be male, female, or unknown)
  • data-collection-id the collection ID of the search record (sometimes referred to as dbid)
  • data-referrer-client for the website, this should be "website", "website-stage", or "website-dev". For iOS this should be "ios")
  • data-referrer-page the name of the page that this web part is being implemented on (e.g. "interactive-image-viewer", "all-hints", etc.)
  • data-locale - see below for details

Optional attributes that should be specified if available:

  • data-image-id the image ID of the search record
  • data-record-id the record ID of the search record
  • data-title the title of the record (e.g. "1910 U.S. Federal Census")
  • data-continue-searching-url - if provided, we'll show a "Continue Searching" button with the provided URL
  • data-person-default-photo-id - the image ID of the person's default photo

UGC photos and stories

  • data-tree-id the tree ID that the content is attached to
  • data-person-id the person ID that the content is attached to
  • data-person-given-name the given name of the person
  • data-person-surname the surname of the person
  • data-person-gender the gender of the person (should be male, female, or unknown)
  • data-original-object-id the original object ID of the user-generated content
  • data-cloned-object-id the cloned object ID of the user-generated content
  • data-object-type the type of content being shared. Should be one of photo, story, video, or audio
  • data-title the user-provided title of the content
  • data-description the user-provided description of the content
  • data-referrer-client for the website, this should be "website", "website-stage", or "website-dev". For iOS this should be "ios")
  • data-referrer-page the name of the page that this web part is being implemented on (e.g. "interactive-image-viewer", "all-hints", etc.)
  • data-locale - see below for details

Optional attributes that should be specified if available:

  • data-continue-searching-url - if provided, we'll show a "Continue Searching" button with the provided URL
  • data-person-default-photo-id - the image ID of the person's default photo

Member tree merges

  • data-tree-id the tree ID of the person was merged into
  • data-person-id the person ID that was merged into
  • data-person-given-name the given name of the person
  • data-person-surname the surname of the person
  • data-person-gender the gender of the person (should be male, female, or unknown)
  • data-member-tree should be set to the String "true"
  • data-referrer-client for the website, this should be "website", "website-stage", or "website-dev". For iOS this should be "ios")
  • data-referrer-page the name of the page that this web part is being implemented on (e.g. "interactive-image-viewer", "all-hints", etc.)
  • data-locale - see below for details

Optional attributes that should be specified if available:

  • data-continue-searching-url - if provided, we'll show a "Continue Searching" button with the provided URL
  • data-person-default-photo-id - the image ID of the person's default photo

data-locale

Specify either string or Windows codes

"en-US" : "1033"
"en-CA" : "4105"
"fr-CA" : "3084"
"en-UK" : "2057"
"sv-SE" : "1053"
"it-IT" : "1040"
"de-DE" : "1031"
"fr-FR" : "1036"

Client-side Implementation

Instructions

  • Add a share region <div> tag to the page as described above with all required data attributes filled out.
  • On document ready, call AjaxManager.send, passing cache: true, jsonpCallback: "<insert CSS ID for the share region>" and the Bandido/Bandido+ web part endpoint URL.

AjaxManager.send Options

  • cache: (boolean, required) should always be set to true
  • jsonpCallback: (string, required) should be set to the CSS ID of the web part region
  • url: (string, required) should be set to the Bandido web part endpoint
  • success, failure, and after: (functions, optional): These callback functions will be called on success/failure of the web part view rendering. The after callback will be called regardless of success or failure.

Example implementation

<div id='StorifiedShareRegion' data-object-id='123' data-tree-id='456' data-person-id='789'
                               data-referrer-client='website' data-referrer-page='AllHints'></div>
<script>
$(function() {
  AjaxManager.send({
    cache: true,
    jsonpCallback: "StorifiedShareRegion",
    url: "http://sharing-webpart.ajax.ancestry.com/webparts/share.json?style=storified-success&region=StorifiedShareRegion"
  });
});
</script>
⚠️ **GitHub.com Fallback** ⚠️