InfoPath Javascript - fixing image control tooltip.

In a previous blog post I discussed using Picture Controls to host lots of images within InfoPath and manage the tooltip.

InfoPath FormServer renders picture buttons with a pop-up Picture Icon that will hide any alt-text that you've set on that picture.

The key is in the Core.js file, which you should NOT modify.  As this is what could happen if you modify core javascript files.

function LinkedPicture_OnMouseOver(a, c) {
    ULSrLq:;
    var b = ViewDataNode_GetViewDataNodeFromHtml(a),
        d = PictureControl_GetPrimaryDataNodeValue(b);

    /* This modification hides the picture icon when the control is disabled */
    var e = PictureControl_GetPicture(a);
    if (e && e.alt == "Picture") {
        e.alt = "";  e.title = "";
    }
    if (typeof(a.disabled) != "undefined" && a.disabled) {
        return;
    }
    /* end modification */

    a = PictureControl_EnsureControl(a);
    d != "" && PictureControl_ShowPictureIcon(a, b, true);
    LeafControl_OnMouseOver(a, c);
}
LinkedPicture.OnMouseOver = LinkedPicture_OnMouseOver;

So instead, you should create a separate webpart page, put the Form control on that page, and add this script override for the LinkedPicture_OnMouseOver function. 

The key is "if (a.disabled) return"

Then in your InfoPath form template, set the control to read-only will ensure the Picture icon doesn't appear on hover, allowing the title text on your image to show up on the browser.

Reading InfoPath template's default values in code

String xml = "";
FormTemplate template = this.Template;
using (Stream s = template.OpenFileFromPackage("template.xml"))
{
    XPathDocument reader = new XPathDocument(s);
    XPathNavigator nav = reader.CreateNavigator();
    XPathNavigator repeat = nav.SelectSingleNode("/my:myFields/my:Repeats/my:Repeat[1]", this.NamespaceManager);
    if (repeat == null)
    {
        return;
    }
    xml = tender.OuterXml;
}
if (!String.IsNullOrEmpty(xml))
{
    XPathNavigator destination = this.CreateNavigator().SelectSingleNode("/my:myFields/my:Repeats", this.NamespaceManager);
    destination.AppendChild(xml);
}

The top part of the code is particularly useful if you want to use the Default Values for repeating sections in InfoPath.  Your code will read the xml for the default values and insert them into the repeating section.  I've previously hardcoded these XML segments for insert, but that's extremely error prone when you inevitably update your XML template with new and more exciting child elements and attributes.

InfoPath's future and what everyone's saying

Andrew Connell

• "the future is unclear at best, realistically pessimistic and a dead-end at worst"
• "I do not use InfoPath any more & I do not recommend people use InfoPath going forward"

http://www.andrewconnell.com/blog/now-infopath-is-dead-rip-infopath-but-now-what

http://www.andrewconnell.com/blog/my-thoughts-infopath-2013-the-future-of-infopath

Mark Rackley

• http://www.sharepointhillbilly.com/
• Suggest: List based JavaScript Form library

http://forms7.codeplex.com/

Corey Roth

• Lists a great list of feature sets for the future Forms solution
• Suggest: wait and see SPC348

http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/01/31/what-a-developer-wants-in-a-post-infopath-world.aspx

Jeremy Thakes

• "I  found that if  you used InfoPath in your Organization to empower Information Workers to build their own forms, a lot of the times they’d hit the 80/20 rule and then hand it off to developers who would have to fix them or complete them."
• Suggest: ISV Nintex Forms

http://www.jeremythake.com/2014/01/microsoft-confirm-infopath-2013-is-last-release-of-the-product/

Microsoft

• InfoPath is dead.
• Long live Forms:

http://www.sharepointconference.com/content/sessions/SPC348

Patrick Halstead

I like Patrick's coverage the best, probably because this is his bread and butter.  He has been thinking about this and planning for a while. 

His upcoming webinar series will cover the various approaches to deal with the data that's currently in the forms:

• Status Quo: keep same format (XML): Formotus, ServBus, Qdabra eForm Viewer
• Hybrid (SharePoint List): move the form's data into SharePoint Lists, then use SharePoint list forms
• Convert to ISV: Nintex, K2, Adobe, Salesforce
• Custom development (database): extract data into database, then build pages and use full set of controls

http://www.youtube.com/watch?v=Z_rhNrFx5D8 [After InfoPath: Planning your Form's Future] 

I say: Please Don't panic.

I'm waiting to see:

• Qdabra eForm Viewer (cheap /  free / open source?  does the user need to do anything?)
• Nintex Forms (roadmap, feature compatibility)
• Microsoft's SPC348 (upgrade roadmap?  future support?  feature compatibility? could be the most expensive path)

I'm sure everyone will have a lot to say in time for the SharePoint Conference.  Stay tuned.

InfoPath - binding Linked Picture Display Text for dynamic tooltips

InfoPath is an ideal tool for XML forms.  Whenever you have forms, invariably, you have little helper icons to suggest text to your users regarding how to fill out a form.

In InfoPath, the Picture control allows you to have alt text.  But this is hard coded and you can't easily change this without modifying your form template.  If you are using the icons in a repeating section, there is also no way to make them different, and display different tooltip based on different rows in the sections.

That's all about to change.  :-)

The Linked Picture Schema

I was experimenting with a different control in InfoPath: the Linked Picture control.

http://msdn.microsoft.com/en-us/library/dd959291.aspx

<img hideFocus="1" class="xdLinkedPicture" xd:boundProp="src" xd:binding="my:field1" 
xd:boundPropSecondary="displaytext" xd:binding_secondary="my:field1/@my:field2" 
tabStop="true" tabIndex="0" xd:xctname="LinkedImage" xd:CtrlId="CTRL2">
    <xsl:attribute name="src">
        <xsl:value-of select="my:field1"/>
    </xsl:attribute>
    <xsl:attribute name="displaytext">
        <xsl:value-of select="my:field1/@my:field2"/>
    </xsl:attribute>
    <xsl:attribute name="alt">
        <xsl:choose>
            <xsl:when test="string-length(my:field1) &gt; 0">
                <xsl:value-of select="my:field1/@my:field2"/>
            </xsl:when>
            <xsl:otherwise>Click here to insert a picture</xsl:otherwise>
        </xsl:choose>
    </xsl:attribute>
</img>

My highlights in the above XML:  the Linked Picture control, at the schema level, supports two level binding - both the image's SRC attribute as well as the DISPLAYTEXT attribute.  Which is then translated to the alt attribute in the XSLT.

Very interesting.

Hmm...  It has always been there!  Since 2010.  Why didn't anyone tell me this

I thought I might need to resort to XSLT hacking in order to get this to work, but I decided to look at the Ribbon controls for the Linked Picture control in InfoPath.  Behold!

There are two sections of binding on the Control Tools ribbon for a Linked Picture control.  The left one, controlling the main binding, is for the SRC.  The right is actually for the Display Text!

Prepare a file to bind to

The XML file you can bind to:

<?xml version="1.0" encoding="utf-8"?>
<html>
    <img-info>http://server/Style Library/Images/info.png</img-info>
    <tooltip1>These guys are cool!</tooltip1>
</html>

Add this as a secondary data source, and bind the two properties to fields on this XML file.

Store the XML on SharePoint server

I suggest storing this file on the SharePoint server.  And then configure InfoPath to obtain the XML from the source server.  This way, each time you open the Form, it will read the most up-to-date version.

Content is now dynamic

This means you can update the image src or title attribute in the XML file dynamically.

You can also update the image without having to redeploy the form.

If you want to change an icon in your form - now they are all stored within SharePoint.  If you want to change the display text, change it in the XML file in SharePoint.  No template re-deployment required.

Your business analyst wants to tweak the words used in the tooltip?  Get him to update the XML file directly in SharePoint.  As long as he doesn't break the XML encoding it's very simple.  No need to update InfoPath.

Image is dynamic.  Form template just got smaller

A bonus of this technique is that the image isn't stored inside the template file.  So your template is now smaller.

Two independent bindings

The two binding are independent, and don't have to come from the same node in a XML source.

This means, you can have a repeating section showing tooltip icons.  Each image's SRC is bound to the same image URL.  But each tooltip can be bound to a repeating field in the repeating section. 

Example

Tooltip working - now works by binding:

• In this case here, the Picture is bound to the URL from the static XML file.
• The tooltip text is bound to the database field returned from the service call.

Works in both Web Forms and InfoPath client forms

Works in InfoPath client as well as web forms*

* Web Forms has an issue where sometimes Javascript will overlay on top of your Linked Picture, preventing the tooltip from showing up.  You'll need to add a small bit of Javascript to cancel this when the Linked Picture control is read-only.

InfoPath - missing data connection files

Sometimes, your InfoPath doesn't show you all the data connection files available in your SharePoint data connections library:

In this screenshot, it is only showing 3. 
There is no way to navigate to see more.

Fix. 

Change the Item Limit in the default view for the Data Connection library in SharePoint.

Change that number.  The default is usually 30.  I had previously changed it down to 3 to take the earlier screenshot.  Let's bump it back to 300.

Now you can see all the data connections again.