Put object metadata into an HTML component

An HTML component can read property values from the object the portal is showing. That is what turns a block of static markup into something that says one thing on one object and another thing on the next.

This guide builds a LinkedIn button from a URL held in a property, which is the smallest useful example of the pattern.

Before you start

• A portal bound to an object type whose objects carry the property you want to use.
• The property definition ID of that property. It is shown in M-Files Admin against the property definition; the examples here use 1162.

Steps

1. Refer to the property by ID.

   Anywhere in the component’s content, %PROPERTY_1162% is replaced by that property’s value on the object being shown. A property the object does not have becomes empty rather than an error, so an empty result usually means the wrong ID.

2. Wrap it in something clickable.

   The markup below uses Fomantic-UI’s labelled button, which CtrlPortals already loads. The label makes it clear where the link goes before anyone clicks it.

3. Open the link with openInDefaultBrowser, not href.

   An <a href> cannot navigate out of the M-Files desktop client. Calling openInDefaultBrowser from a click handler works in both the desktop and web clients, which an href does not.

   <div class="ui labeled button"
       data-tooltip="The URL for the LinkedIn profile is known by the portal as %PROPERTY_1162%."
       data-position="top left">
       <div class="ui button basic compact" style="width: 5em; background-color: white;"
           onclick="openInDefaultBrowser('%PROPERTY_1162%')">
           <i class="linkedin icon blue huge fluid"></i>
       </div>
       <a class="ui basic left pointing label" href="#embed-0"
           onclick="openInDefaultBrowser('%PROPERTY_1162%')">
           LinkedIn
       </a>
   </div>

Check

Open the portal on an object that has the property filled in, and on one that does not.

The first should show the button and open the URL in a browser. The second should show the button with nothing behind it — which is the case worth designing for, either by hiding the component with a portal rule or by accepting a dead button.

A wrong property ID fails silently

%PROPERTY_9999% on an object with no property 9999 produces an empty string, not an error. A button that does nothing is almost always the wrong ID rather than a broken handler.

Related

• The HTML component reference — every setting it has, and the other placeholders available.
• Portal rules — for showing the component only on objects that have the property.