18 Replies Latest reply on Nov 19, 2016 8:42 AM by jordan.van.bergen@copaco.com

    Advice on creating a volunteer effort logging widget/tile?

    nbussard

      We would like to drive awareness of, and engagement around, the individual and group volunteer efforts of employees across the company. Jive is the ideal platform for this, but would require some extensions to allow individuals to log a volunteer effort, including such information as the location, cause, charitable organization, other users involved, hours volunteered, etc. Each logged effort should update appropriate streams and support Sharing, Liking and Bookmarking, as for any other Jive content. Widgets added to the Overview page of other Places would display a filtered list of logged efforts appropriate to that Place, e.g. a New York community Place would show a list of all logged efforts with location as New York. Widgets that perform some basic aggregation of hours logged per user/location/cause would add a competitive element, with the former added as an indicator on the user’s profile page. Some basic reporting and integration with Jive events (populating users & hours information) would help those that manage the coordination of the group volunteer efforts. Any inputs and considerations on the most appropriate design would be greatly appreciated.

          • Re: Advice on creating a volunteer effort logging widget/tile?
            mansari3

            It looks to be more of building a custom content type, with additional features for Likes,Share bookmark etc.

             

            Events plugin looks to be a closer match. In terms Event Duration --- the effort logged, Location,  also provides the Like Bookmark share behavior

            Creating a custom tile/Widget for displaying/logging effort, behind the scenes creating Events in an open group (This Group - themed out not to create content from front end).  Leveraging out of the box Jive Events behavior.

            • Re: Re: Advice on creating a volunteer effort logging widget/tile?
              henryhbruce

              Ryan Rutan,

               

              Nikki forwarded me your email response. I’m the technical lead for the volunteer logging functionality described in her post and would very much appreciate 10-15 minutes of your time for your inputs on the technical design. I’m free anytime tomorrow afternoon after 1:30pm EST. If you let me know your availability, I’ll circulate a meeting request with conference bridge and online meeting details.

               

              Appreciate your links to relevant content on the Developer community, some of which we have already started going through.

               

              Many thanks, Henry

                • Re: Advice on creating a volunteer effort logging widget/tile?
                  Ryan Rutan

                  No worries Henry Bruce, but in the mean time, let me put some ideas down.

                  We would like to drive awareness of, and engagement around, the individual and group volunteer efforts of employees across the company.


                  Jive is the ideal platform for this, but would require some extensions to allow individuals to log a volunteer effort, including such information as the location, cause, charitable organization, other users involved, hours volunteered, etc.


                  Each logged effort should update appropriate streams and support Sharing, Liking and Bookmarking, as for any other Jive content.


                  Widgets added to the Overview page of other Places would display a filtered list of logged efforts appropriate to that Place, e.g. a New York community Place would show a list of all logged efforts with location as New York.


                  Widgets that perform some basic aggregation of hours logged per user/location/cause would add a competitive element, with the former added as an indicator on the user’s profile page.


                  Some basic reporting and integration with Jive events (populating users & hours information) would help those that manage the coordination of the group volunteer efforts. Any inputs and considerations on the most appropriate design would be greatly appreciated.

                   

                  From the above statements, an interesting way to do this without doing any major work ... would be the following 2 options:

                  • QuickTemplates v2 - Plugin Method (low-tech, some room for error but available via configuration today if you already have the plugin installed)
                    • Create a Template Document that has a table/bullet list of information that needs to be collected from the end-user.
                    • Use an HTML Widget to create a button that is a simple "one-click to submit" on the main page of the group/place in question:
                      • Technically, I think you could add some HTML magic and create a form that auto-hides or something on click...and collect the information ... and assemble the content subject, body, tags and categories via JS and then POSTs to the fields to the Blog Post create service.
                    • Use a View Blog or Similar Widget to display the accomplishments anywhere in Jive.
                    • (Pro) - Fast Heartbeat on the community...possi
                    • (Gap) - Reporting via CMR, Hours Aggregation. Might be able to hack together some sort of API call to parse out the times in the body of the content, but it would be subject to user-input error
                  • use the Jive SDK to create an Add-On with the following features:
                    • Build a DB in Mongo that can track submissions and totals based on the dynamics you need.
                    • Build a List Tile
                      • Shows the latest 5 activities for the place
                        • Tile Item Action takes the user to the Blog Post describing the action
                      • Tile Action - pops up the log time submission form
                        • Use the Content Picker via OSAPI Jive Core V3 Picker Reference to select the event to link
                        • onSubmit - Data is stored to MongoDB
                        • Blog Post is created on-behalf of the user in the place of the Tile Config with a standard format (subject, body, etc...) ... this is done via the /contents service
                          • Add Meta-Data to the Blog Post via the ExtProps service such that blog posts are marked with hidden meta-data as being created as a part of this integration
                          • May need/want to use Run-As here to give the person who did the work credit.
                    • Gauge Tile (optional, recommended)
                      • Allows a place admin to set goals for the company and show the current status: week, month, quarter configuration to display on the dashboard
                      • In a way, this would be great to communicate your status (like below, but in gauge form). 
                      • Data pushes would happen in whatever interval; however, you wanted to from your add-on.
                        thermometer-goal-mark-stars-359376581.jpg
                    • App Action - Content > Event
                      • Note: Not sure what "integration with Jive events", but if you want people to be able to contribute these times ... but this would do the exact same experience as the Tile Action above.
                    • !app Action - Display All Contributions
                      • Displays a list of linked contributions for a given Jive Event in a Pop-Up modal when clicked.  Admins would drop the link of to this action in the description of the Event.
                    • Reporting
                      • Use the Jive Developer Series - Exploring the Data Export API if possible to create a custom report experience/download
                      • (cheap option) You could get away with tracking Blog Posts in the space using CMR as long as no one else blogged in the space, or maybe use filter by users and

                   

                  As for times to talk, I have times Thursday afternoon CST, if you'd like to pick a time.  Let me know what works best for you and will try to make that work.

                    • Re: Advice on creating a volunteer effort logging widget/tile?
                      henryhbruce

                      Ryan,

                       

                      Many thanks for taking the time to provide some detailed initial guidance, this is very helpful.

                       

                      I'm free anytime tomorrow afternoon CST, with a preference for as early in the afternoon as convenient, to provide an opportunity for my developer (who's in India) to join us. Let me know your preference, either here or by email (hbruce@sapient.com) and I'll share conference details accordingly.

                       

                      Thanks, Henry

                      • Re: Advice on creating a volunteer effort logging widget/tile?
                        henryhbruce

                        Ryan Rutan,

                         

                        I figure you've had a very busy week. Please do let me know if you can find some time to talk next week and in the meantime, if you're able to review the approach and comment on the open assumptions/questions below, that would be much appreciated.

                         

                        Thanks and enjoy the long weekend.

                        Henry

                         

                        Design Approach

                         

                        Create a Vox Volunteer Tools (VVT) DB in MongoDB to store all logged efforts

                        • Each document contains:
                          • The 9 fields in the form: Metro; Business Unit; Account; Charitable Organization; When did you volunteer?; How long for?; Causes; Who else volunteered?; What did you do?
                          • An additional field to store the URL of the created content item in Jive

                        Use a List Tile (List Tile: Design and JSON Schema | Jive Community) to:

                        • Display a list of previously logged volunteer efforts
                          • Create a list tile for addition to any Place's Activity Page
                            • The Configuration of the list tile supports setting a Title for the tile and optionally allows for the selection of a Metro to only show the logged activity for
                            • The Metro (Place) is selected using the Place Picker
                          • Viewing the list tile displays 10 of the last logged efforts
                            • Query the VVT DB to retrieve the required items, returning from all places if no Place is specified
                            • Display appropriate field values from each logged effort
                        • Display a link that opens a form to log your own volunteer efforts
                          • The Properties > Action of the list tile specifies a Log your volunteer efforts link (similar to the Share State link in the Tutorial)
                          • Clicking link displays the form to enter your volunteer efforts
                            • Metro and Business Unit are selected using the Place Picker
                            • Who else volunteered (People) are selected using the People Picker
                            • When did you volunteer and how long for are selected using date and number pickers - TBC
                            • Other form fields are static drop-downs or free text
                          • A Save button (similar to the Create Discussion button in the tutorial):
                            • Creates a osapi.jive.corev3.contents.Post content item, formatting the fields as required for display and saving intoContent > Text
                            • Saves all fields in Mongo DB, along with a reference to the created content item
                            • Saves all fields in ExtProps for the created content item (only for completeness, these are not subsequently referenced anywhere) with a call to CreateExtProps
                          • Update the list upon successful saving OR redirect to the created content item
                        • Create a report/export of previously logged volunteer efforts
                          • Identify the appropriate URL string(s) to issue GET requests to the Jive Data Export Service to export all logged efforts from across the community
                          • Further filtering (e.g. by fields saved in ExtProps) to be done in Excel

                         

                        Design Assumptions & Questions

                         

                        • Display a link that opens a form to log your own volunteer efforts
                          • We have to save the volunteer effort information in a separate VVT DB, as the Jive API doesn't currently provide any way to query against content items' ExtProps (as would be required to display the latest x logged efforts - the most basic listing example)
                        • Display a list of previously logged volunteer efforts
                          • Given that the main list action is used to log a volunteer effort, is there a way to support Share, Comment & Like from within the List Tile for each displayed list line item? Will the user have to navigate to the main content view for this functionality, or can we do at least some of it within the tile?
                          • Can we restrict the editing of the created content items, such that the formatted information in the content body can't be altered and would then be out of sync with what's logged in the VVT DB and in the ExtProps?
                          • Is a separate Tile implementation (Activity, Gauge?) required to display some of this information (e.g. sum of hours for a mentioned individual) on a user's profile?
                        • Create a report/export
                          • How will we filter only the blog post content created through the list tile for inclusion in the export (as well as looking ahead to supporting references in other Jive modules, e.g. Gamification)? It appears that filtering using ExtProps is generally unsupported (as it is for content retrieval), unless the ?filter=match() syntax does somehow support ExtProps references? As such, do we need to consider re-purposing some other form of identification? Appropriate options I've found include: a custom content type (although this seems complex and involved still); tagging (this seems too open and uncontrolled); custom outcome (maybe the best option, assuming the outcome actions listed here are applicable to custom actions, e.g. OutcomeEvent-OUTCOME_MARKED_VOLUNTEEREFFORT, although mapping specific outcome type access to groups is still work in progress, but due soon?).
                          • Assuming we're somehow able to filter the content at query time, can we specify the response includes the ExtProps, to support further data filtering and aggregating in Excel (e.g. SUM of hours volunteered, an item in the ExtProps array)?


                          • Re: Advice on creating a volunteer effort logging widget/tile?
                            Ryan Rutan
                            • I would recommend storing the volunteer information in a separate DB, as the whole purpose of the solution is to provide awareness and insight...which means you'll need ready access to the information in various forms, and parsing it out of a content-table isn't the best idea IMO. =)
                            • There is no support for Share/Comment/Like from within the List Tile.  You could probably use the Tile Action view and bootstrap Share/Liking, but I would defer to the core features on the blog post/activity stream to do this..as the experience is much more inline and wont be limited to your app.
                            • Restricting editing (when the blog post is in their name) will be hard.  A better design (albeit not 100% fool-proof), would be to use a Webhook that listens for blog posts that are edited in the space.  When edited, the content is scanned...and values are "determined" from the standard table format.   The values are then compared to the values in the DB, and values updated accordingly.  Again, it's not fool-proof but would cater to a better user-experience.  In the event of an error or unknown event, you can escalate a message to someone in Jive (or via email) to have them investigate the discrepancy.
                            • If you wanted to display information on the user's profile, you'll need to implement that view on the App Action Contribution Reference and provide an experience tab on their profile that displays the appropriate information for their volunteer activities.
                            • My thought was to lace every blog post with a specific property, such as  https://developers.jivesoftware.com/api/v3/cloud/rest/ExtPropsService.html#getObjectsByExtProp(String, String, int, int, String) or keep track of the contentIDs in the DB...which could still come in handy.
                            • I would recommend using the MongoDB for displaying sum and aggregate report information.  It will be the fastest, and you can always reach out to jive for more details once you are ready.  The ExtProps are mainly there so you can go from content to meta-data ... the same way that contentID in the DB will help you go from Meta-data to content to render a complete view of the action recorded.

                             

                            Lots of great questions!  If you'd like to chat on the phone let me know, but overall...it seems as though you have a strong handle on what I was suggesting. Good luck, and let us know how we can help! =)

                              • Re: Advice on creating a volunteer effort logging widget/tile?
                                henryhbruce

                                Thanks Ryan.

                                 

                                Just a few follow up questions/confirmations:

                                • Assuming we do add a known property to ExtProps for every blog post, e.g. VolunteerToolsID=<Unique ID from Mongo DB Collection>, can we query against this in the current implementation of the Data Export API, maybe in the filter=match() syntax? If so, can you share the details, as the documentation doesn't describe this scenario.
                                • To follow on from this, can we also retrieve every ExtProps using the Data Export API? This allow us to write the values into separate ExtProps fields and not have to parse them out of the blog post description to perform analysis (SUM, etc) in Excel
                                • Lastly, it seems that we'll be restricted to adding our custom Tile List to the Activity page and not be able to add it to the Overview page, is this correct? If so, are there plans to offer more flexible Activity page layouts? Are there any workarounds to this currently, so we can give our list more prominence on the page?

                                 

                                Thanks again for all your help. I don't know if you will be in attendance at the New York User Group next week, but if so, I look forward to meeting you then.

                                Henry

                                  • Re: Advice on creating a volunteer effort logging widget/tile?
                                    Ryan Rutan
                                    • The ExtProps are not visible via the Data Export Service, so if you want to do this type of filtering...I would recommend that you maintain this in your meta-data tables for querying etc...
                                    • ExtProps are more used for identifying content more so than reporting on it.  You should be able to load all content that has the same ExtProps key, but doing extensive filtering beyond that would probably be out of scope for its use.
                                    • Correct, you will not be able to add it to the overview page; however, you can use the HTML widget ... and have it call a JS file that you host/compose dynamically from your middleware service to bring data to the Overview page if that makes sense.

                                     

                                    No worries...glad to help =) I wont be at the NYC user group either unfortunately; however, I'm sure it will be quite fun! =)

                                      • Re: Advice on creating a volunteer effort logging widget/tile?
                                        henryhbruce

                                        Thanks Ryan.

                                         

                                        So, unless we wanted to parse out the values from the blog post content after the Export (using formulas in Excel for example), it doesn't look like the Data Export API would be of much use. Do you have any other creative ideas for getting the information in the meta-data tables out through the Jive UI while maintaining its structure?

                                         

                                        Also, any examples that you can share or point us in the for a dynamic JS file would be helpful.

                                         

                                        Thanks, Henry

                                          • Re: Advice on creating a volunteer effort logging widget/tile?
                                            Ryan Rutan

                                            You could always try the mashup approach.  Use the Data Export API to grab the raw activity, and then make a second call to get objects that should be included...then mash them up.  Other than that, I would work with storing the data in meta-data in a means that optimizes the linkage for your reporting needs.

                                              • Re: Advice on creating a volunteer effort logging widget/tile?
                                                vsain6

                                                Hi Ryan,

                                                We are using tile for this .

                                                I am facing an issue while integration place picker, people picker etc .

                                                I am using this code

                                                osapi.jive.corev3.places.requestPicker({

                                                            type : "space",

                                                            success : function(data){};

                                                But the problem is , this code opens up a picker window and when user click on that window , our tile window disapper and result of that is the scope etc get lost and the response does not come back to this callback function .

                                                 

                                                Any solution?

                                                  • Re: Advice on creating a volunteer effort logging widget/tile?
                                                    vsain6

                                                    Just to mention - I am in Henry's Team .

                                                      • Re: Advice on creating a volunteer effort logging widget/tile?
                                                        Ryan Rutan

                                                        Can you send me some code or a link on the Jive Sandbox where I can take a look?  Agreed this doesnt sound normal.

                                                          • Re: Re: Advice on creating a volunteer effort logging widget/tile?
                                                            henryhbruce

                                                            Ryan,

                                                            Unfortunately we don't have this in a public sandbox and I still don't have your email address to send you the files directly, but I've included a screenshot (which suggests z-index bug to me a) and relevant code snippets below.

                                                            Henry

                                                             

                                                             

                                                            Place Picker Bug.png


                                                            tiles\sampletile-list\public\action.html


                                                            <!doctype html>
                                                            <html>
                                                            <head>
                                                                <link rel="stylesheet" type="text/css" href="{{{host}}}/stylesheets/bootstrap.min.css">
                                                                <meta http-equiv="Content-Type" value="text/html; charset=utf-8" />
                                                                <title>List Action</title>
                                                            </head>

                                                            <body>

                                                            <div class="container-fluid" id="issue-panel">
                                                                <hr>
                                                                <div class="container-fluid">
                                                                    <div class="alert-area" style="display:none">
                                                                        <!-- area for alerts to appear -->
                                                                    </div>
                                                                    <form action="/sampletile-list/action" method="post">
                                                                    <table>
                                                                        <tr>
                                                                            <td colspan="6">
                                                                                <label>Log your Volunteer Effort</label>
                                                                            </td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td colspan="2"><label>Metro</label></td>
                                                                            <td><input type="text" id="metroId" onclick="getMetroId();" name="metroId"></td>
                                                                            <td><label>Business Unit</label></td>
                                                                            <td><input type="text" id="businessUnitId" onclick="getBusinessUnitId();" name="businessUnitId"></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td colspan="2"><label>Account</label></td>
                                                                            <td><input type="text" id="account" name="account"></td>
                                                                            <td><label>Charitable Organization</label></td>
                                                                            <td><input type="text" id="co" name="co"></td>
                                                                        </tr>
                                                                         <tr>
                                                                            <td><label>when did you volunteer (Date)</label></td>
                                                                            <td><input type="date" id="date" name="date"></td>
                                                                            <td><label>How long for</label></td>
                                                                            <td><input type="time" id="time" name="time"></td>
                                                                            <td><label>causes</label></td>
                                                                            <td><input type="text" id="causes" name="causes"></td>
                                                                        </tr>
                                                                        <tr>
                                                                            <td  colspan="4"><label>who else</label></td>
                                                                            <td><input type="text" id="whoElseVolunteerId" onclick="getWhoElseVolunteer();" name="whoElseVolunteerId"></td>
                                                                           
                                                                        </tr>
                                                                         <tr>
                                                                            <td  colspan="4"><label>what did you do?</label></td>
                                                                            <td><input type="text" id="whatyoudid" name="whatyoudid"></td>
                                                                           
                                                                        </tr>
                                                                         
                                                                      
                                                                        <tr>
                                                                            <td colspan="2">
                                                                                <input type="submit"   id="save" title="save" />
                                                                            </td>
                                                                        </tr>

                                                                    </table>
                                                                    </form>
                                                                </div>
                                                            </div>

                                                            <script src="{{{host}}}/javascripts/jQuery-1.10.2.js"></script>
                                                            <script src="{{{host}}}/javascripts/jquery.base64.min.js"></script>
                                                            <script src="{{{host}}}/javascripts/bootstrap.min.js"></script>
                                                            <script src="{{{host}}}/sampletile-list/javascripts/action.js"></script>
                                                            </body>
                                                            </html>


                                                            \tiles\sampletile-list\public\javascripts\action.js

                                                            function getMetroId() {

                                                            osapi.jive.corev3.places.requestPicker({
                                                              type : "space",
                                                              success : function(data) {
                                                              document.getElementById('metroId').value = data.id;
                                                              }
                                                            });

                                                            }

                                                            function getBusinessUnitId() {

                                                            osapi.jive.corev3.places.requestPicker({
                                                              type : "space",
                                                              success : function(data) {
                                                               document.getElementById('businessUnitId').value = data.id;
                                                              }
                                                            });

                                                            }
                                                            function getWhoElseVolunteer() {
                                                            osapi.jive.corev3.people.requestPicker({
                                                              success : function(data) {
                                                               document.getElementById('whoElseVolunteerId').value = data.id;
                                                              },
                                                              error : function(data) {
                                                               document.getElementById('whoElseVolunteerId').value = data.id;
                                                              },
                                                              multiple : true
                                                            });
                                                            }

                                                             

                                                        • Re: Advice on creating a volunteer effort logging widget/tile?
                                                          jordan.van.bergen@copaco.com

                                                          vikram saini Did you ever solve this? I am running into the same behavior currently.