HTML Mark-up Metadata Injection

As mentioned in the HTML mark-up module description, you can inject M-Files metadata into your HTML mark-up.

In this case, let’s say that we have an empty portal for some object in M-Files that contains a URL to a LinkedIn page in property number 1162. We can then refer to that URL in the HTML module’s content as %PROPERTY_1162%. Using that property’s content, it is then fairly easy to construct the mark-up for a LinkedIn-flavoured button, making it easy for users to navigate to that LinkedIn page and easy to guess that the opened page will in fact be LinkedIn.

To make the LinkedIn button, we use Fomantic-UI’s class ui labeled button to create a labelled button.

There is one specific detail we have to keep in mind; we cannot use an <a>-tag’s href attribute to navigate inside M-Files, so to make our portal work in both M-Files Web and Desktop versions, we use a click-handler with the openInDefaultBrowser-function.

<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>