HAPI

HAPI is Peoplevine's proprietary language that converts HTML snippets into API calls to dynamically load data, essentially giving you server-side programming with HTML and PeopleVine data.

Here is an example HAPI snippet that pulls back Events:

<div data-pv-component="event" data-pv-type="eventList">
    <div>
        <img src="{@event_graphic@}">
            <div>
                <h4>{@event_title@}</h4>
                <p>Event Venue: <span>{@event_venue@}</span></p>
                <p>{@event_summary@}</p>
                <a href="/event/{@event_no@}">View Event</a>
            </div>
    </div>
</div>

Structure - Two Parts:

A HAPI snippet is composed of two parts: an outer block and an inner block.

• Outer block - this is the wrapper for the element to be displayed.

• Inner block - this is the code that displays the content

<!--Outerblock Start-->
<div data-pv-component="event" data-pv-type="eventList" data-pv-object="abc"> 
   <!--Innerblock Start-->
   <h1>{@event_title@}</h1>
   <p>{@event_description@}</p>
   <!--Innerblock Emd-->
</div>
<!--Outerblock End-->

Outer block Structure:

• 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-parameters - you can place a JSON parsed string in here to query through the data

• data-pv-object - will automatically place the data object in a tag for Javascript purposes *this is a very useful tool to reveal all data that can be pulled back and displayed

Inner block:

• data-pv-element - this is the data field to be loaded in between the HTML tags (this can be substituted for sombrero tags {@element@}).

• data-pv-formatter - this can be used in combination with a data-pv-element to format the data to the end user.

There are different data levels to call the data from the component:

1. Getting a top-level element - use the element name ex: {@event_date@}

2. Getting a secondary element within a dropdown - use a "." between the data values ex: {@events_settings.button_text@}

3. Getting a value from array - use a [] - ex: {@social_networks[facebook]@}

Usage

HAPI can be used across the Portal however only specific HAPI elements can be used in Layouts.

Most likely you will be using HAPI code on the pages of the site however we do support the usage of HAPI in the layouts if needed

Below are the HAPI elements supported in layouts:

{@gender@}
{@first_name@}
{@last_name@}
{@profile_photo@}
{@middle_name@}
{@company_name@}
{@company_title@}
{@profile_photo@}
{@email@}
{@mobile_number@}
{@phone_number@}
{@customer_no@}
{@address@}
{@address2@}
{@city@}
{@state@}
{@zip_code@}
{@country@}
{@birthdate@}
{@birthdate_month@}
{@birthdate_day@}
{@birthdate_year@}
{@membership_id@}
{@username@}
{@opt_in_email@}
{@opt_in_sms@}
{@membership_sku@}