4 Replies Latest reply on Aug 1, 2016 5:46 AM by mcollinge

    Short profile/business card on hover - How to?

    mattdickens

      I'm putting together a couple of tiles to allow the display of recent content in a specific group and to follow specific blogs etc.. but one of the features I'd like to include is the display of a user's business card or mini-profile when hovering over their name or avatar. Has anyone done this. I can't find any guidance on this and don't understand why such core functionality isn't made easier for developers to include in their apps and tiles to ensure consistency.

       

      I can see it's using tooltip and there's the /profile-short.jspa that you pass the userID of the user you want to display which returns the following but anyone help me out on how to call it and render it?

       

      <div id="jive-error-box" class="jive-error-box" style="display:none;" aria-live="polite" aria-atomic="true">

      </div>

       

       

      <section class="j-usercard-right clearfix js-usercard-profile-data">

          <h3>

                  <a href="/people/mdickens001" class="font-color-normal">Matthew Dickens</a>

          </h3>

          <dl>

              <dt class="font-color-meta">Role</dt>

              <dd>

                  <a href="/people?filterID=all%7Eprofile%5Btitle%5D%7Etitle%5BBusiness%20Solutions%20Lead%2C%20Global%20Knowledge%20Services%5D" class="url font-color-normal">Business Solutions Lead, Global Knowledge Services</a>

                  <a href="/people/mdickens001/people?filterID=orgchart" title="view in orgchart">

                      <span class="jive-icon-sml jive-glyph-orgchart"></span>

                  </a>

              </dd>

              <dt class="font-color-meta">Line of Service</dt>

              <dd>

                  <a href="/people?filterID=all%7Eprofile%5Bdepartment%5D%7Edepartment%5BIFS%5D" class="url font-color-normal">IFS</a> </dd>

              <dt class="font-color-meta">Email</dt>

              <dd>

                  <a href="xxxxxxxxxxxxxxxxxxxxxxxx" class="font-color-normal">xxxxxxxxxxxxxxxxxxxxxxxxxx</a> </dd>

              <dt class="font-color-meta">Office Phone</dt>

              <dd>

                  +44(0)12 345 6789 </dd>

          </dl>

      </section>

       

       

      <section class="j-usercard-left">

          <img src="/profile-image-display.jspa?imageID=60388&amp;size=200" class="j-profile-photo" alt="" />

          <span class="js-statuslevel">

      <span class="j-status-levels"><img src="/8.0.2.e63f85c/resources/images/status/statusicon-205.png"

                 alt="Mega Spark" title="Mega Spark"/> Mega Spark <span>(3,074 points)</span></span>

          </span>

      </section>

       

       

      <section class="j-usercard-actions clearfix">

          <form class="j-form">

              <div class="j-modal-buttons clearfix">

                  <div class='j-card-button'>

                      <div class="js-follow-user-link j-follow-user-link clearfix" data-userid="0001" data-streamsassoc="1" data-location="tool-tip" data-bidirectional="false" data-follower-count="177" data-displayname="Matthew Dickens" data-approvals-enabled="false" aria-live="polite" aria-atomic="true" aria-label="Follow"><a href="#" class="js-follow j-btn-global j-btn-small" style="display:none">Follow <span class="jive-icon-glyph icon-pulse j-instreamicon"></span></a><a href="#" class="j-following js-following  j-btn-global j-btn-small"><span class="j-js-streams-assoc-count j-instream-count">Following in <span class="jive-icon-glyph icon-pulse j-instreamicon"></span> 1</span></a><span class="js-pending j-disabled j-btn-global j-btn-small" style="display:none">Awaiting approval</span><span class="j-friend-list-chooser-container j-js-friend-list-chooser-container" style="display: none;"><a href="#" title="Apply labels" class="js-connection-label-btn j-connection-label-btn j-social-action j-split-button j-btn-global j-btn-small"  title="Apply labels"><span class="jive-icon-glyph icon-user-plus"></span><span class="j-508-label">Apply labels</span></a>

                          <div class="j-connection-labels-menu js-connection-labels-menu j-menu j-quick-menu j-pop-main" style="display: none;" data-userid="0001">

                              <h4 class="font-color-meta-light">Apply labels</h4>

                              <form class="j-js-friend-list-chooser">

                                  <ul class="j-icon-list"></ul>

                              </form>

                          </div>

                          </span>

                      </div>

                  </div>

              </div>

          </form>

      </section>

       

        • Re: Short profile/business card on hover - How to?
          whoiskevin

          Not completely clear on how much you are looking to modify the profile card but there are ways to produce links and information on the profile card.  https://community.jivesoftware.com/docs/DOC-114464#jive_content_id_Profile__Hovercard_Action_Button

           

          But those are button/links.  To do more with the profile card you would have to override files using either theme or maybe even a plugin.  That gets more complicated and those files are slightly different between versions.  profile-short.jspa is a struts mapping that leads to the view-profile-short.ftl file.  Struts is responsible for handling that call.  So again you would need to modify the struts class to produce additional data for that template and override that template.  These things would require a plugin or overlay so if you can figure out a creative way to use the existing profile integrations your integration would be easier.

            • Re: Short profile/business card on hover - How to?
              mattdickens

              Thanks Kevin Brown

               

              I'm not actually looking to modify the profile card at all - I just want to be able to call/display it from within my tiles. As an example, I have just built a blog post tile to replicate the blog widget and it all works great but I'd like to able to allow the user to hover over the author name or avatar and have the profile dialog pop up like in the widget and everywhere else in the environment.

               

                • Re: Short profile/business card on hover - How to?
                  whoiskevin

                  Sorry. I was reading too fast the other day.

                   

                  As far as I know there is not a built in action for a tile utilize so that it can call the profile hard on hover like the Jive UI.  Did some quick searching in my ide and I could not find the javascript (either closure or soy) that is responsible for opening it.  Might can track it down but with the iframes it may be tricky getting it to work right..definitely possible but your right it is not an easy one to find.  Might consider just building your own lightbox and calling profile-short.jspa that way.

                  1 person found this helpful
                  • Re: Short profile/business card on hover - How to?
                    mcollinge

                    We've not moved to tiles on element14.com, but if this was code in a widget that wasn't running in an iframe, then you could simply put in a link like this & the hovercard will appear when you hover over the link.. I'm guessing you've tried this?

                     

                    <a href="/community/people/test" data-externalid="" data-username="test" data-avatarid="1025" 
                    id="jive-2001425673573322381" data-userid="2001" data-presence="null" 
                    class="jiveTT-hover-user jive-username-link">test user</a>