Portal Engine - HAPI

The portal engine can convert HTML snippets into API calls to dynamically load data, essentially giving you server side programming with straight up HTML and PeopleVine data or sombrero {@ @} tags. Below are common uses of this technology:

Leverage these HTML tags inline to a DIV, span, etc.

• Outer Block - this is the wrapper for the element to be displayed
  • data-pv-component - this is used to identify which PeopleVine component you are loading data for.
  • data-pv-type - this signifies the type of content to load on the screen, typically a repeater or form.
  • data-pv-id - used to load a specific resource on the page e.g. a specific product, event or content snippet. Otherwise it will pull from the query string parameters.
  • data-pv-parameters - you can place a JSON parsed string in here to query through the data (see API)
    • You can also access referenceTypes passed in by using {@referenceType.survey@} which will bring back the survey_no of the submission
  • data-pv-object - will automatically place the data object in a <script> tag for javascript purposes
  • data-pv-conditional - will only render this code if the condition is met (e.g. data-pv-conditional="{@sport@} = Baseball" where {@sport@} is the parameter and Baseball is the value)
    • Supports attribute(NAME OF ATTRIBUTE) instead of ___
    • {@FIELD@} pulls from the parameters or querystring
    • Now works with data-pv-do="conditional"
  • data-pv-noresultsmessage="your message here" will display this message if no data is returned
  • data-pv-noresultshide="id or class" and we will hide it if there are no results by adding a display: none in the css on the page
  • data-pv-noresultsshow="id or class" and we will hide it if there are no results by adding a display: none in the css on the page
  • data-pv-report = "true" - will auto generate the report in a pageable data table (only works for general:report)
    • <script type=""text/javascript"">
var table = $('.autoDataTable');
table.DataTable({ responsive: true });
</script>
• Inner Block - this is the repeating template that displays the content
  • data-pv-element - this is the data field to be loaded in between the HTML tags. These can be identified within the API documentation
    • Enter the element name (e.g. first_name)
    • Get a secondary element with . (e.g. customer.first_name)
    • Get a value from array with [] (e.g. social_networks[facebook])
  • data-pv-formatter - this can be used in combination with a data-pv-element to format the data to the end user.
  • data-pv-min & data-pv-max - this is used to set the min and max on a select dropdown
  • data-pv-link - Grabs the url associated with the tag and sets it as the href
  • data-pv-firstclass - used to assign this class to the first element
  • data-pv-prefix - this will prefix the value with this text
  • data-pv-suffix - this will suffix the value with this text
  • data-pv-repeater - this allows you to use a subset of data and parse through it (e.g. responses in surveyResponseData)
• Forms
  • <input type="button" onclick="HAPIform(#ID, ref_type)"/> - this will submit all the input and select options to our HAPIform method which will then submit the contents to the manageItems method to create the item

  These are the type of components and types that can be leveraged:

  • Events & Ticketing (data-pv-component="event")
    • eventList - this will display a list of upcoming events based on the query string and/or data -pv-parameters.
    • eventView - this will display the event details
    • Attendees - brings back attendee ticket info
  • Content (data-pv-component="content")
    • snippet - this will display a content snippet in the specified HTML tag
    • list- this will display a list of content pages based on parameters
    • page - this brings back a single page
    • rotators - this will return the rotators for a specific group
    • Faq - will return FAQ data
  • Contest (data-pv-component="contest")
    • leaderboard - this would display the current results of the contest including all contestants
  • Campaign (data-pv-component="campaign")
    • list - this displays a list of items in a campaign that have been completed and the next one in play
  • Scheduler (data-pv-component="scheduler")
    • Item - this provides the full details on a scheduler
    • days - this provides a list of the available dates using start_date and slots_available
    • slots - this provides a list of available schedule slots
    • Bookings - this returns all the bookings for a customer. Customer_no must be supplied
    • Booking this will return a single booking either by schedule_book_no, schedule_slot_no or schedule_item_no along with customer_no
  • About (data-pv-component="about")
    • socialLink - then uses data-pv-link tag to load the correct URL
  • Company (data-pv-component="company")
    • <empty> - this displays the company information inline
  • Directory (data-pv-component="directory")
    • business_locations - this lists out the business and business locations
    • business - this will return a business or businesses matching criteria
  • Media (data-pv-component="media")
    • <empty> - this outputs all media based on the search
  • Survey (data-pv-component="survey")
    • info - returns basic info about the survey
    • questions - writes out all the questions/form fields (use {@input@} for the input field)
    • response - returns the responses someone added for a survey
    • responses - returns all the responses for a survey group, survey, customer or business
    • formresponses - returns all responses for a survey and allows to filter by status
    • application - returns survey application
    • application_responses - returns responses to an application
    • applicationStats - return the stats for an application (survey/group)
  • Categories (data-pv-component="categories")
    • <empty> - allows you to search for categories
      • Return Gallery categories: component_no=-1
  • Request (data-pv-component="request") - this allows you to call an external URL and convert the data to an object
    • <enter URL> - make sure you set data-pv-object="obj" to set the data to the javascript for processing
  • Memberships (data-pv-component="membership")
    • List - returns a list of membership types and filterable
    • Info - returns 1 that matches the membership_no
    • Members - returns a list of members
    • Memberships - brings back person's memberships
    • Activity - provides recent activity on a member
    • ActivityStats - provides stats on recent activity for members
    • Membershipcard - returns the membership card details
  • Text (data-pv-component="text")
    • This will just output the text or HTML that's in the object; it's used for conditional content.
  • Gift Cards (data-pv-component="giftcard")
    • <empty> - This will output the gift card and messaging associated with it.
    • Stats - this will return general stats about balance
  • Notifications (data-pv-component="notification")
    • on-page - this will return on page notifications based on settings
  • Bookings (data-pv-component="bookings")
    • Returns all bookings of events and scheduler
  • Loyalty (data-pv-component="loyalty")
    • Earned - returns a point_earned activity
    • Balance - returns point balance
    • Activities - returns all activities they can perform
    • Dashboard - returns total points, points until next reward, next level, total visits, total rewards available
  • Commerce (data-pv-component="commerce")
    • Shop - searches products as if it were on the /shop page
    • Mini - same as shop but smaller data set (productMini)
    • CategoryStats - displays the category statistics
    • Orders - list all order data for person
    • Locationrevenue - returns member vs. total spend per location
  • Attributes (data-pv-component="attribute")
  • Customer (data-pv-component="customer")
    • Attributes - returns all attributes for a customer (good for data-pv-object)
    • Profile - returns the standard customer fields
    • Touchpoints - returns the full customer profile with touchpoints
    • Demographicdata - returns general stats about the customer's database with age and gender
    • You can also get to customer attributes by adding anywhere in page
    • Attributedata - returns customer attribute group data
  • Transaction (data-pv-component="transaction")
    • <blank> - returns list of transactions
    • Stats - returns general stats for display
    • Spend - returns a report of customer spend
  • Messaging (data-pv-component="messaging")
    • Messages - returns all messages in list
    • Conversation - returns all conversations
  • Favorite (data-pv-component="favorite")
  • Offers (data-pv-component="offers")
    • List - provides a list of offers based on criteria
    • Filters - returns a list of available filters
  • Subscription (data-pv-component="subscription")
    • <blank> - returns list of subscriptions
    • Stats - returns general stats for display
  • Funding Campaigns (data-pv-component="fundcampaign")
    • Campaign - provides the campaign with last 5 posts and donations (can be random)
    • Posts - returns posts by the publisher
    • Donations - returns donations made on the campaign
  • Projects (data-pv-component="project")
    • List - returns all projects
    • Bids - returns all bids
    • Deliverables - returns all deliverables for project
  • Notes (data-pv-component="notes")
  • General (data-pv-component="general")
    • Report - returns all custom data export reports
    • Data - returns the data of a report in JSON format