Skip navigation

Overview

 

A request was made to try and create a link to an embedded app view, from a piece of content created by the Forms app.  Well, yes, it turns out that this can actually be done...  I am even a little surprised myself, but it can in fact happen and here's how.  This can be done with no change to the app itself, and works as-is, assuming you are on Jive 6+.

 

How To

 

1.  Get a reference link from the app you want to link to

 

  • Create a new piece of content, in which you can utilize the !app functionality
  • From the RTE, perform the !app from the app and get the link into the body
  • Switch the RTE to the HTML view
  • Look for your newly rendered embedded app link, at the time of this writing it looks something like this, for Wikipedia linking to George Washington

 

jive_devslanding_transparent.png

<a class="jive-link-app-icon jive_macro jive_macro_appEmbeddedView"

  href="javascript:;"

  style="background-image: url('/servlet/JiveServlet/downloadImage/1921703/912085dac9d100cfd2786f126278fc317a845deb.png');"

  title="George Washington"

  jivemacro="appEmbeddedView"

  data-orig-content="George Washington&lt;span class=&quot;j-ui-elem j-app-link&quot;&gt;&lt;/span&gt;"

  __context="{&quot;page&quot;:&quot;George Washington&quot;}"

  __view="embedded"

  __action_id="com.jivesoftware.rte.wikipedia"

  __appuuid="2d3a78e7-22f7-486d-8f1f-86c8a65e6aa1"

  __icon="/servlet/JiveServlet/downloadImage/1921703/912085dac9d100cfd2786f126278fc317a845deb.png"

  __jive_macro_name="appEmbeddedView">George Washington<span class="j-ui-elem j-app-link"></span></a>

 

 

2.  Convert the pertinent data in the link to be generic variable(s)

 

Depending how complex the context of the app link is, you may need to use more than one form field reference, but in the case of the Wikipedia app, you only really need one field.  In this example the form field is going to have the ID of "subject" so all that needs to be done is to replace all occurrences of "George Washington" with {$subject}, which will look like this:

<a class="jive-link-app-icon jive_macro jive_macro_appEmbeddedView"

  href="javascript:;"

  style="background-image: url('/servlet/JiveServlet/downloadImage/1921703/912085dac9d100cfd2786f126278fc317a845deb.png');"

  title="{$subject}"

  jivemacro="appEmbeddedView"

  data-orig-content="{$subject}&lt;span class=&quot;j-ui-elem j-app-link&quot;&gt;&lt;/span&gt;"

  __context="{&quot;page&quot;:&quot;{$subject}&quot;}"

  __view="embedded"

  __action_id="com.jivesoftware.rte.wikipedia"

  __appuuid="2d3a78e7-22f7-486d-8f1f-86c8a65e6aa1"

  __icon="/servlet/JiveServlet/downloadImage/1921703/912085dac9d100cfd2786f126278fc317a845deb.png"

  __jive_macro_name="appEmbeddedView">{$subject}<span class="j-ui-elem j-app-link"></span></a>

 

Again, the amount of data / fields you need to create a link is going to likely vary quite a bit from app to app, and each data value you need in the embedded app link needs to be exposed somewhere in the form.  You could even be a bit tricky and expose 2 fields which separate the label of the embedded link from the data of the link, by replacing the last value (between the <a> tags) with another field, something like:

<a class="jive-link-app-icon jive_macro jive_macro_appEmbeddedView"

  href="javascript:;"

  style="background-image: url('/servlet/JiveServlet/downloadImage/1921703/912085dac9d100cfd2786f126278fc317a845deb.png');"

  title="{$linkText}"

  jivemacro="appEmbeddedView"

  data-orig-content="{$subject}&lt;span class=&quot;j-ui-elem j-app-link&quot;&gt;&lt;/span&gt;"

  __context="{&quot;page&quot;:&quot;{$subject}&quot;}"

  __view="embedded"

  __action_id="com.jivesoftware.rte.wikipedia"

  __appuuid="2d3a78e7-22f7-486d-8f1f-86c8a65e6aa1"

  __icon="/servlet/JiveServlet/downloadImage/1921703/912085dac9d100cfd2786f126278fc317a845deb.png"

  __jive_macro_name="appEmbeddedView">{$linkText}<span class="j-ui-elem j-app-link"></span></a>

 

 

In the above case, the app would still pull up an embedded view of the "subject" field of the form but the anchor link text and title would be a second field with ID "linkText" from the form.

 

3.  Put the generic forms link into a piece of HTML content used by the Forms app

 

All that has to be done here is to take the link, with the form parameters now included, and put that into some HTML.  The Forms app will look for and replace these {$field} substitutions in the embedded link just as it would in any other part of the HTML in the body.

 

Taking It for a Spin

 

Here is a sample template, using the above example, in which there is just one single field in the template, a subject:  Wiki Document Template

 

Here is the HTML which is used by the template to create a document with an embedded link to the Wikipedia app:  Wiki Document About {$subject}

 

Here is a sample of a document created by the template, which contains an embedded link to the Wikipedia article on George Washington:  Wiki Document About George Washington

 

You can use this direct link to the Forms app to point directly to this sample template and try to generate a Wikipedia document of your own.

 

Conclusion

 

And that's that...  You can now create a piece of content using the Forms app which actually contains an embedded link to another app.

 

One important little caveat, especially with Jive Cloud in play, is that updates of Jive may change how this link is formatted so content containing this links may or may not age gracefully through upgrades.  Giving that it patterns off of links created by Jive apps, the hope is that the links will safely live on, but there is no guarantee of that.

 

Questions, comments, feedback?

I had the opportunity to attend the Interaction Design Association's Interaction 13 conference January 28 - 31 in Toronto. I have attended the conference twice in the past, once in Vancouver B.C. and in Savannah at the Savannah College of Art and Design (SCAD). The association typically partners with a design school in order to open up the association to students as well as more senior practitioners. This year the conference partner was the Ontario College of Art and Design (OCAD).

 

zqhk_ocad002.jpg

 

I always return to work energized after attending this conference. Whether it's sharing stories or finding out how peers are solving similar problems in business and design, it's always validating to be able to sit down and have a conversation with someone who speaks the same language of design. Many of the ideas that were presented are incredibly exciting and on the bleeding-edge of what's happening at the intersection of design and technology. I'm not sure exactly how they'll work their way into Jive design, but rest assured, they will! Here's a quick recap of a few of of the presentations and some general notes about the conference.

jive_devslanding_transparent.png

1359732623559-1.jpg

 

This is the 10th anniversary of the founding of the organization. I'm happy to say that I was working in the design field when the IxDA was formed and am blown away by how the organization has matured into a thriving community of practice. There were about 1000 attendees this year - the biggest number of attendees thus far. I had an opportunity to speak with in-house designers, new designers, consultants, and designers working in large enterprises. I spoke with design team from GE, who is investing heavily in an in-house design team to re-think their core products from durable goods to jet engines (Did you know: Each commercial jet engine generates about 2TB of data on each transcontinental flight. That's truly big data).


IMAG0900.jpg

 

IxDA Interaction Awards

This was the second year that the association held an awards ceremony. These were awards chosen by association members to represent what members think is the best representation of interaction design.


The Best in Show award was given to 21 Balançoires, designed by DailyTLJ in Montreal. This was an interactive design that transformed a blighted area of Montréal into a interactive art installation through a set of swings that play a musical note when people are swinging. As more people swing, the melodies combine and the more beautiful the music becomes. I was blown away by the merging of design, community and participation of this piece.


21 Balançoires (21 Swings) - YouTube

 

Conference Themes

There were some common threads woven throughout the conference presentations:

 

  • Big data - in the context of data that we are all creating through our interactions, privacy issues around big data and big data as cultural artifacts.
  • UX designers as the new brand architects - this was part of a redux presentation by Cliff Kuang from Fast Company. Why Good Design Is Finally A Bottom Line Investment | Co.Design: business + innovation + design
  • Serendipity, delight and homophily in networks. These discussions were relevant for anyone participating in social networks, in the consumer world or in the enterprise context.
  • Designer founders - designers are no longer seeking technology co-founders, but forging ahead and jumping headlong into business. It's an exciting time to be a designer.
  • Cross channel experiences - there is an emerging need to move away from silo'd apps and toward cross-channel experiences, moving for device to device without interruption.
  • Internet of things - many designers are beginning to realize practical applications of networked devices, from physical products to internet devices, this is an exciting design problem with enormous implications. "The future is already here, it's just not widely distributed. William Gibson"
  • Timelines - we're beginning to design things that will outlive us (Robert Fabricant, macro-interactions). This was specially prescient given the investment companies like GE are making in design. Energy grids, power plants, durable goods - designers need to be aware of the impact they are having on the world.

 

 

Conference Demographics

  • Young designers still in school or new graduates, those new to the field (very focused on process and work deliverables)
  • Smaller numbers of seasoned professionals, both in-house + consultants (Motorola, GE, Google, Facebook, Cisco, SAP, Microsoft, Jive)
  • Creative agency designers - working on interactive (device interfaces). (Frog, R/GA, CP+B, Ziba)
  • Fewer numbers of industrial designers (physical product designers)
  • Fewer numbers of interactive artists - although Kate Hartman (Botanicalls and OCAD) keynoted with a presentation on "wearables" A Video of BotaniCalls Improving the Health of Plants and Making Gardening Easy - YouTube
  • Very few data designers (either art or analysis, although Jer Thorpe keynoted with Data and the Human Experience)

 

Presentation Summaries

A few short summaries from my notes.

 

Microinteractions

Dan Saffer of Smart Design

 

Microinteractions refer to the small details that make or break a successful interaction. Dan's talk showed examples of good design in existing products and stressed a renewed focus on the details. Some examples included a billing flow where the credit card is auto-selected when the user enters the first few digits if the card. My interpretation is that as designers, we need to make a better effort to move our interactions from reacting to user input to anticipating user needs. A few additional examples include Akismet.com website handling a right-click on the logo by offering the user a choice of logo sizes and file formats. Typically users attempting to save a public image will right-click and save. Akismet anticipates this and handles the flow in an elegant and helpful way.

 

Screen Shot 2013-02-12 at 1.55.42 PM.png

 

Dan broke microinteractions down into:

Triggers > Rules > Feedback > Loops and Modes

 

Dan recommended looking at opportunities to present useful information using existing interface. In the window chrome to show subtle indicators (the way that search results appear in the browser chrome in the Chrome web browser.)

 

In physical product design, the Nest thermostat was referred to as good example of adaptive technology put to good use.

 

Data and the Human Experience

Jer Thorpe of The Office of Creative Research

 

Some people have an entertaining and relaxed presentation style, Jer is one of them. His presentation touched on the human aspect of big data, privacy issues around the data that is being created by us or on our behalf. He showed some of his work including an interface using G-speak (Minority Report gloves) to navigate the data set provided by the Kepler telescope. Wow.

 

One of the great takeaway principles for data visualization is the OOH/AHH principle - as a designer of data products, you want viewers to first say OOH (recognize the beauty of the design) and then quickly get to AHH (understanding of what the data is presenting). Very very useful to our work here at Jive.

 

Jer showed some work from his time at the NYTimes, including Cascade:

http://nytlabs.com/projects/cascade.html

 

We've moving quickly to a period where we will have access to high resolution analytical tools as a result of better ways to manage big data and better tools (and designers) to present the information in meaningful way.

 

He ended his presentation by exploring how data serves as cultural artifacts. His example was location based data that is being collected on your phone, data that you do not easily have access to - yet is personal to you based on the context in which the data was created.  e.g. location data for where he ate his first meal after arriving in NYC. This is data personal to the owner, data that tells a rich story.

 

 

How to Design Social Experiences

Paul Adams of Facebook

 

Paul provided excellent insight into the behaviors around social interactions from his work at Facebook.

Much of the presentation was delivered in very Tweetable snippets, I've included those below.

 

People want to feel unique and people want to feel connected.

Social as a term is going away (not: go to a party and "be social"). Sharing is a means to an ends.

 

We're no longer designing apps, we're designing systems, we need to think about design from a systems approach.

 

Thoughts on mobile:

It's not a horse… but what is it? Referring to the introduction of the internal combustion engine and the impact it had on society and the landscape. We need to stop thinking about mobile as a technology. It's much much bigger that that in the same way that the automobile changed commerce and changed the landscape. Mobile is similar in this respect.

 

We have at our disposal a massive network of information, available at any time in any place. And we're using our network of friends as a filter to this information.

 

Me (Identity), story of my life.

Us (Everyone), relate to people I know.

Everyone (Connections), connect with new people.

 

Personal identity is distinct from social identity. Design for one or the other, but not both.

 

Focus on lightweight interactions over time, tools are more heavyweight.

Focus on feelings not facts (more applicable in the consumer context, business maybe not so much).

The internet is made of cats - emotional, visceral.

 

To illustrate, the most shared stories of 2011 were before and after images of the Japanese Tsunami, but no actual news.

People talk about feelings, not facts.

 

  • Show people what they have in common with others
  • Design lightweight ways for people to interact
  • Give suggestions for who to communicate with
  • Design the story first
  • Design the friends experience

 

There is no way to do research in social. Instead establish a hypothesis, develop simple product, launch it, iterate, learn.

Hypothesis, build, ship, iterate

 

Slides from many of these presentations are being posted to Slideshare, you can also follow the hashtag #ixd13 on Twitter.

I highly recommend getting involved in the Interaction Design Association (http://ixda.org). There are chapters in cities around the world and meetups happening regularly.

Get out and meet your fellow designers.

 

Redux slides by Jeroen van Geel:

Interaction 13 Redux

 

Thanks for reading!

Today, I'm excited to announce two new Jive Apps the integrate information from SalesForce. The first app, Salesforce Link, is from Jive's own Jussi Heikkola, and is the "Wikipedia App" for Salesforce, allowing you to quickly insert !App artifacts that reference objects in Salesforce. Using this app, users no longer have to perform an expensive context switch and jump from Jive to Salesforce just to see the basic information about an account, opportunity or contact.

 

Want a more full featured integration with Salesforce? Hedloc's Kynetyc app is for you. This robust integration features an integrated dashboard that let's you organize and view the different objects inside of Salesforce. One other killer feature of this app is that is will search across Jive and Salesforce with one query. This makes it very easy to get a complete picture of all the activity that is happening for an account or opportunity.

 

Here's a quick video that demonstrates these two apps. For more information on Hedloc's Kynetyc app, you can check out the The specified item was not found. group. They also have a killer video that goes into more details on the Kynetyc app.  For more information on the Salesforce Link app, stop by the (Archived) Apps by Jive! group.

 

Enjoy!

Filter Blog