Advanced Poll Tile Configuration

Setup and Configuration

Add the Tile

After you’ve done this – https://socialedgeconsulting.atlassian.net/wiki/spaces/TFJ/pages/491522 -- proceed to add it to a place. The Advanced Poll Tile requires one place in Jive to set up:

Add a new page to the place

  • Navigate to the group, space or project

  • Click Manage > New Page.  If you do not see this option you cannot manage this place

  • A window will appear asking for the page name (required) and the layout you wish to use.  Each layout will have a set number of tiles available to it.

    • Layout 1:  Four large tiles full screen

    • Layout 2:  Four large tiles located on the left side, 12 small tiles on the right

    • Layout 3:  12 small tiles on the left, four large tiles on the right

    • Layout 4:  6 small tiles on the left, four large tiles in the middle, 6 small tiles on the right

  1. Choose the layout that works for your place and enter the name of your page.

Click the ok button when done

 

Add tiles to the new page

  • If continuing from the previous section you can start adding tiles.  If you exited the new page configuration click the “Edit page” link above the Manage menu to reopen the configuration

  • Click the “Add a tile” link in any of the spots available

  • A dialog will appear with different tile categories on the left, select the category for the list of available tiles it contains

  • Select the desired tile and it will be placed in that location.  Some tiles will allow you to edit certain runtime properties while others will be auto populated.  If run time properties are available it will open a configuration window for that tile as soon as you select it.

  • Tiles can move up and down in the column they are on, but not left and right

  • Once you are finished editing the page click the Save button in the lower left corner

 

Configuring the Tile (Generating a New Advanced Poll)

Before You Start 


Now that you are in the configuration panel of the Advanced Poll. We recommend configuring the main settings of the tile first. This will allow you to simply select from your preset configuration options (e.g. categories, color palette, etc.) when you are adding your advanced poll. 

Below are the settings we recommend you configure ​first​: 

  • Layouts​ - choose the layout of the poll; choose between carousel and listed

  • Setup - setup the poll name, customized margins, and a poll close date 

  • Color Theme​ - set your brand colors for use on the tile

  • Add Header - add a header to be displayed above the poll using HTML/CSS

  • Fonts - set the font for the title, the body text, the choice text, and the submit button text

Setting these first will make it easy for you to quickly add the elements to your polls. See the following sections below for details as well as images on each configurable section of the tile.

 

Layouts

  • Listed - Displays a list of polls, one following another in a scrollable style (image pictured below)

 

  • Carousel - Displays polls in a carousel style where it shows one and will rotate through the other polls (only displaying one at a time, no auto rotation) 

    • User will still have the option to vote for every poll separately or to vote all at once

 

Setup

  • Add a Title to be displayed at the top of the tile (optional)

  • To add polls: 

  • Add a Poll Close Date - the poll will be closed on this date, users can still view the poll as well as results but voting through the tile will be disabled

 

Color Theme

  1. Click THEME to add a color theme to use in multiple areas of the image gallery. To find specific colors for primary color and secondary color use this link: https://www.color-hex.com/

  • Primary Color - impacts the in-focus choice option, the percentage bar, the submit button, and “your vote” indicator

  • Secondary Color - impacts the Vote button and progress bar

Custom HTML

This feature allows you to add custom code (e.g. a block of links, or an image) above the tile.

  1. Click Add header Add raw CSS and HTML to have it display above the Advance poll tile.



  1. Here’s an example of what that CSS and HTML change looks like in this image example. The greeting is added to the top of the Advanced Poll Tile.

Fonts

For an Advanced Poll you will choose the Fonts for each of the main text options that display in Stories:

  1. Tile title - Will affect the title font for the tile

  2. Poll title - Will affect the title font for the poll

  3. Body - Will affect the font of the general body text of the poll

  4. Choice - Will affect the font of the choice options of a poll

  5. Submit - Will affect the font of the submit button text 

  6. Select ​Fonts​ from the Tile menu.

  7. Select a Font method from these options:

    1. Basic Font: Choose from the browser default fonts (serif, sans-serif, cursive, and monotype) and global web-safe fonts used in your Jive community. If you select a Basic font, you can also configure the script type (Bold, Italic, etc.).

    2. Google Font​: you can select a font from those provided by Google. Begin typing to search for a specific Google font. Browse and preview the Google Fonts database here: ​Google Fonts​.

    3. Custom Font:​ you can import your own custom font by supplying hosted links to your font files. For cross-browser compatibility, please specify at least a woff or TTF font file. Note: You are responsible for licensing and paying for that font. 

Note: Default is “relative sizing” 

Revise an Existing Poll Tile

To revise an existing Advanced Poll is a three-step process.

  1. Navigate to the Advanced Poll tile, copy the code from there,

  2. Then navigate to the Configuration page to revise the code

  3. Once revised you will need to paste the code back into the Advanced Poll Tile. Follow the steps below.

Copy Existing Configuration code

  1. Ensure that you have the configuration code of the older version of the Advanced Poll copied and stored for safekeeping. To do so: 

Click on copy to clipboard as highlighted above.

Edit Existing Configuration code

  1. Navigate to the Configuration page for the tile, click Migrate Configuration and under the “ADD NEW CONFIG”  tab paste the existing configuration code that you had set aside for safekeeping.

  2. Click on apply 

  3. From there you can make any changes to that existing Advanced Poll just as you normally would 

 

Best Practices and Tips



Best Practice/Tip

How To…

Backup

Copy all CSS and HTML, including the code in the Copy/Paste config options to a text editor. Save this file locally or to a cloud storage system. 

What to put in the header. 

Add some custom css and html code (e.g. a block of links, or an image) above the tile. 

Use the {query} string in header HTML

You can pass on Jive information within a URL by including the string {query}. For example, you can welcome a user to your community or place with their name. “Hello, {name} Welcome to the HR Space.”



Support

Need support or want to talk to us?  Please send an email to:

support@socialedgeoncuslting.com