Share Flow Data & Testing

Describes Share Flow blog post data and testing information.

#Overview

The Share Flow collects user stories/submission over series of steps (also known as a 'wizard').

Once the user has entered all their information, they submit the form and a blog post is created.

The Share Flow system is used by a number of different specific flows. Each flow can collect different variations of information and is styled differently. Please see the Overview page for a list of the current Share Flow pages.

Please add any additional useful information you find whilst testing.

Share Flow Testing Tips

• Always test the flow as both an admin user and as a 'normal' user. Some fields are only shown if the user is an admin. In the past, some issues have only occurred to one type of user.
• Testing should be done across all modern browsers: Chrome, Firefox, Microsoft Edge, Safari, Mobile Safari, Android
• It is possible to move backwards in the flow and edit previous forms (and then jump forward again). Please test that editing previous panels are correctly saved.

Share Flow Overview

Sign in to share

If the user is logged out they are shown a signup form. Once signed in they should be redirected back to the main share page.

Feedback Form

The share flow page is based on a Nationbuilder feedback form. The blog post is created via the API then the feedback form is submitted with a note about the submission. The feedback form is used to take advantage of Nationbuilder features such as notifying admins, sending an email response, etc.

Navigation Buttons

All steps have a variation of navigation buttons at the bottom right of the screen.

On the first step there are the following buttons at the bottom of the content panel:

• Start - start the flow and move to the next step.
• Cancel - this can be configured to take the user back to another page on the site. It defaults to the home page.

On the middle steps there are the following buttons at the bottom of the form panel:

• Skip - this moves to the next step without saving the users input
• Next - this saves the users input on the form and moves to the next step

Note that if a form has a required fields, then the user cannot advance until those fields are entered.

On every step after the first there is a button above the progress bars:

• Back - moves the user back a step in the flow

On the last step (review) there is a single button at the bottom of the page:

• Share - submits the share and redirects the user to another page.

Mobile View

The mobile view has a different layout.

• It only shows a single panel (content or form) at one time.
• An additional mobile navigation panel is shown that switches between the content panel and the form panel. The text on the mobile nav is automatically generated from the heading of the visible panel (this heading is shown at the top of the panel on desktop).
• An additional "Your Turn" button is shown at the bottom of most content panels that automatically switches the user to viewing the form panel.

Progress Indicators

Progress indicators showing the main steps in the flow are shown on the left on desktop or at the top of the page on mobile.

• The current step is highlighted.
• Completed steps are marked with a tick icon.
• It is possible to click on the progress indicator of any completed step to jump to that step. It is not possible to jump forward to a step that has not yet been completed.
• Not all steps have a progress indicator (for example the "Tag Group" step). In that case the last step with an indicator is highlighted active until the next step with an indicator is reached.

Share Flow Steps

The rest of this document describes each step in the flow in more detail. Some steps and/or fields only appear in particular flows (for example in the Stories of Te Reo flow there is an additional step to collect details about the story). These variations are described in each step.

The final result is always a Nationbuilder blog post. Each step also describes where each collected data item will be added to the blog post (either a primary field or a tag on the post).

Introduction Step

Content Panel

This is a single full screen content panel. The panel is split into two columns with intro text on the left and an image on the right.

Form Panel

No form panel.

Data

No data is collected.

Upload Step

Content panel

Instructions on sharing (from Feedback page content).

Form panel:

Shows three buttons:

• Add a photo - clicking this will open a Cloudinary photo uploader where image files can be selected and uploaded.
• Add video - clicking this will open a modal dialog. The modal contains a Pipe video uploader and a Youtube link field.
• Add audio - clicking this will open a Cloudinary photo uploader where image files can be selected and uploaded.

Multiple media of each type can be uploaded, which will appear as a preview in the form.

Additionally all media is split into:

• Hero/Primary Media - there is one primary hero media. This appears first and is shown larger. This media item is the main item shown on things like the Reo media wall and the Stories of Te Reo site.
• Additional Media - there can be multiple additional media. These are only shown on the Reo site blog post page (ie, you must click through to view the full post).

Media Edit Options:

• Hero media have a Delete button which will remove the uploaded media item from the submission.
• Additional media have a dropdown with two options - Delete and Make Hero. Make Hero will promote that media item to be the hero media and demote the current hero item.

Data

The blog post will have one tag for the hero media item, depending on the hero media type:

• cloudinary_image:{URL} - url to primary/hero image
• video:{URL} - url to primary/hero video
• cloudinary_audio:{URL} - url to primary/hero audio

The blog post can have multiple tags for every additional media item, depending on the media type:

• cloudinary_image_additional:{URL} - url to additional media image
• video_additional:{URL} - url to additional media video
• cloudinary_audio_additional:{URL} - url to additional media audio

Write Step

Content Panel

Instructions on sharing (from Feedback page content).

Form Panel

• Text Content - Shows text area input with custom prompt.
• Post Anonymously checkbox. If the user checks this they see an Anonymous Author Name dropdown. This is a required field.

Stories of Te Reo version

• Title field. User entered title of the story. This is a required field

If the user is admin:

• Author First Name - Allows admin to override the author name. Used if an admin is entering a story for another user.
• Author Last Name - As above for last name.
• Source Title - Allows admin to enter original source - used if adding a story from another website. For example, "Stuff.co.nz"
• Source URL - Allows admin to enter link to original story.

Data

Notes on Authors - there are three types of author:

• First is a normal user created post where the user is the author of their post. The post's author_id field is set to link the post to the user, and the post is tagged author_id:{USER ID}.
• Second is an anonymous user post - the author_id is still set and the post is tagged author_id:{AUTHOR_ID}, but the post also gets the anonymous_author tag and a author_first_name:Alias tag.
• Finally an admin can override the author. This option exists for the Stories of Te Reo flow where admins often create posts for users that don't exist on the site. This is done by setting the Author First Name and/or the Author Last Name form fields. In this case the author_id is not set and the author_id:{ID} tag is not added. The post is tagged admin_created_post and the post is tagged author_first_name:{First Name} and/or author_last_name:{Last Name}.

The Fields:

• Text Content - the first sentence of this text sets the blog post Content Before Flip. The full text is the Content After Flip as HTML.
• Author First Name - if set adds the tag author_first_name:{First Name} See additional notes below.
• Author Last Name - if set adds the tag author_last_name:{Last Name} See additional notes below.
• If either Author First Name or Author Last Name is set, it adds the tag admin_created_post. This is used by admins in the Stories of Te Reo flow to create posts for other users not on the site. The author_id field is not set and no author tag is added.
• If neither Author First Name or Author Last Name are set, then the current user is considered the author of the post. The author_id field is set to the current user ID, and the post is tagged author_id:{User ID}
• Post Anonymously - if checked it adds the tag anonymous_author to the post. Note that the author_id field is still set and the post is still tagged author_id:{ID}. Neither the Reo site or the SOTR site should display the real authors name except to that author.
• Anonymous Author Dropdown - this is a required field if Post Anonymously is checked. It sets the tag author_first_name:{First Name Alias} This alias should be displayed on all posts on the Reo site.
• Source Title/Source URL - if set, adds this information to the Content After Flip HTML as an embedded HTML link. The link has the text Source Title and points to the URL.

Tag Groups Step

Content Panel

Instructions on how to tag groups on the post.

Form Panel

This contains the tag group widget (from the original share form). The user can tag groups on the post.

• If the user is a member of any groups (by previously creating a Group or connecting to an existing Group), then those groups are listed with tick boxes.
• There is a Search Box for users to find and tag any group on the site.

Data

• If the user checks a connected group the post is tagged org_member_post:{Org ID}
• If the user searches for a group the post is tagged org_mention:{Org ID}
• In both cases the post is also tagged org_post:{Org ID}

Your Info Step

This step is only shown if the information is not yet collected. If the panel is not showing then it can be made to appear by using the Nationbuilder control panel and clearing one of the custom fields below.

Content Panel

Instructions on filling in About You panel.

Form Panel

• Where are you on your individual journey? - A slider to for the user to select their language level.
• Do you identify as Māori? - Yes/No
• Iwi - If the user identifies as Maori then an iwi text input field is shown. The text input makes common iwi suggestions as the user types. There is a "Add another iwi" link to add an additional iwi text input.
• Region - Dropdown list of New Zealand regions plus Overseas option.

Data

This panel does not add (most) collected information to the blog post; instead the data collected in this panel is saved in the users custom fields in Nationbuilder.

• Where are you on your reo journey? - Custom field multi choice
• Identifies as Māori- Custom field multi choice (Yes/No).
• category_id:tangata_whenua and category:Story is by tangata whenua tags. If the user identifies as Maori at this point these tags are added to the blog post. This is used in the Stories of Te Reo site, but must be set here when the user answers the question.
• Iwi - Custom text field. If multiple iwi have been entered they are stored in a comma separated list.
• Region - Custom text field

Review Step

Content Panel

No content panel shown

Form Panel

This shows a full width preview panel.

There is a single Share button to submit the post.

Share Step

This step happens when the user clicks the Share button on the final review step. The step has no user interface, however a "Saving" modal dialog is shown whilst the data is submitted.

Data

The final blog posts fields are added at this point.

name - "{author short name} | {moment ID} | {author ID}" - the blog post name is shown in the control panel. It is composed of the following parts: The author short name (first name or last name if the author has no first name). This is either the signed in user, the anonymous name, or the admin entered name. The moment ID is configured for each share flow. The author ID is only added if the post was not created by an admin.

slug - the blog post slug is created by Nationbuilder when the post is submitted. The slug is used to give the post a unique URL on the site. Nationbuilder uses the name field (above) to generate the slug. Special characters (such as | ) are removed. If the slug already exists on the site, Nationbuilder automatically appends some random characters to the end of the slug to ensure it is unique.

title - "{ author short name } | { moment title }" - the blog post title is shown in the browser title bar. The moment title value is configured for each share flow.

headline - the blog post headline is shown on the site pages as the post headline. If the headline field was specifically collected (ie, SOTR flow) then that value is used. Otherwise it is set to the above title field.

author_id - rechecks that is the post is not admin created (see above) - if not then sets the author to the current user.

author_id:{ID} tag - rechecks that if the author is set, adds this tag to the post. This is used for displaying posts on the users profile page.

Tag pending_moderation - this tag is added to all submitted posts. Its presence means the post can only be viewed its author or an admin. The post goes through moderation (using the moderation tool). If the post is approved then this tag is removed which makes it viewable by other users.

User Custom Fields

Additionally the following custom fields are set on the submitting user. These custom fields are used in later emails to that user.

• last_submitted_blog_post_slug - newly created blog post slug
• last_submitted_blog_post_id - newly created blog post id
• last_submitted_blog_slug - newly created blog slug (this is the slug of the blog that the post was created in)

For historical reasons the following fields are set if the flow is "Share you why"

• share_your_why_blog_post_slug - blog post slug
• share_your_why_blog_post_id - blog post id

Campaign Monitor Custom Fields Sync

Also at share submission, if the user has filled out the "About You" panel and they have chosen to sign up to emails via Campaign Monitor, then the users selected Region and Language Level are synced across. Please refer to this Gitbook page for more information: https://app.gitbook.com/o/i11tZ7HsGOtgUAbWVcda/s/oeyjGBvJDTEsicYPIInW/how-it-works/email-subscriptions-campaign-monitor