Installing & Configuring the IntelligenceBank Connector for Umbraco CMS

Video Overview

Installation

The IntelligenceBank Connector is compatible with Umbraco CMS version 10, 11 or 12. To install the package, you can use .NET CLI.

Marketplace Listing

NuGet Packages

The major and minor package versions are the same as the Umbraco version.

Property Editor - IB: Media Picker

Upon installation, a new property editor called IB: Media Picker will become available for configuration as a data type.

The property will also be available as part of the standard Grid component in Umbraco 10 and 11 (Umbraco 12 doesn't have a Grid component). Umbraco 12 has a new Block List component, that contains nested components, and IntelligencebankMediaItem can be used as a nested component.

Rich-Text Editor Option Configuration

This section is for enabling the IntelligenceBank Connector as a new action on the Rich-Text editor.

 In the root of your site, add the following values to appsettings.json:

"RichTextEditor": { 
"Commands": [
{
"Alias": "IntelligenceBank",
"Name": "IB: Media Picker",
"Mode": "All"
}
],
"Plugins": [ "IntelligenceBank" ]
}

The result should look like the following:

Connector Settings

Go to Settings > Third Party > IntelligenceBank > Settings.

• Web App Url: Do not change this field value. It is used for testing the Web App on staging environments.
• Tenant: Enter the default value to always input into the Platform URL field on the login screen of the IntelligenceBank Connector. If you are using a custom URL, enter the entire URL (without https://). If you are not using a custom URL, enter the sub-domain that precedes .intelligencebank.com (also without https://). 
• Enable browser login: Enable this option if you want the Browser Login option for Single Sign On authentication to always be enabled by default on the login screen of the IntelligenceBank Connector. 
• Enable custom url: Enable this option if you want the Platform URL field on the login screen of the IntelligenceBank Connector to always have the Custom URL option enabled by default.

Displaying Content & Front End Examples

After installing the package, you have 2 options for displaying inserted assets on a page.

The first option can be used when you do not want to write code. The extension itself will generate all the tags needed. To do this, just insert the following 2 lines into the HTML page:

@using IntelligenceBank.Umbraco.Connector.Core.Models;

@Html.IntelligenceBankMediaItem(Model,"propertyAliasHere")

“propertyAliasHere” - this is the name of the field in the Document where our media picker is located.

The second line itself will determine what type of file is used and automatically generate the necessary tags: ‘img’, ‘audio’, etc...

If you want more control (for example, creating your own tag and inserting data attributes such as image name, size, etc, for further use in JS), then you can use a more advanced approach.

Example:

<div 

  data-url='"@Html.Raw(Model.Value<IntelligenceBankMediaItem>("ibImagePicker").Url"'

  data-file-name='"@Html.Raw(Model.Value<IntelligenceBankMediaItem>("ibImagePicker").FileName"'

  data-file-type'"@Html.Raw(Model.Value<IntelligenceBankMediaItem>("ibImagePicker").FileType"'>

</div>

The main point is that you can get the object «IntelligenceBankMediaItem» by using the expression Model.Value<IntelligenceBankMediaItem>. This object contains fields (ResourceType, Name, Description, Type, etc) with data. This data is what is provided by IntelligenceBank when inserting an asset within a Page via one of the property editors available with the integration.

That second approach allows you to process data on the backend, if there is such a need, and to write your own extensions. Also see Direct calls to IntelligenceBank Media Elements.

See Front End examples here: https://ib-connector-umb11.acceptance.brimit.com/