MFN Loader
Drop-in client side Javascript implementation of on-demand HTTP API
Description
The MFN Loader is a script that loads in the MFN news feed for a customer from our On-Demand API. It enables you to configure and easily customize the design of the news feed, and it has several filtering options, tags, locale/language support and built in pagination.
Getting started
To quickly get started with the integration you can fetch our pre-made integration template here that already has a default CSS stylesheet setup which you can to start from:
Download the zip package from the link above and extract the content
mfn-loader-template.zip:
assets (Folder)
css (Folder)
archive.css (Report archive CSS file)
general.css (General CSS styles)
list.css (List view CSS file)
single.css (Single view CSS file)
png (Folder containing some example icons)
themes (Folder containing CSS themes)
default (Folder)
flat (Folder)
grid (Folder)
archive.html (A customizable Report archive template)
disclaimer.html (A customizable Disclaimer template)
list.html (HTML template with configuration options for the news list)
list_flat.html (HTML template with configuration options for the news list)
list_grid.html (HTML template with configuration options for the news list)
list_multi.html (A template with multiple instances of a news list)
single.html (HTML template with configuration options for a single news item)
Then edit both
list.html
andsingle.html
and replace the text <FEED_ID> with your Feed ID which you received from usUpload the files to your server (remote or locally)
Go
https://<your_server>/list.html
to view the example integration
Now you should see a list of the news items and can proceed with configuring, tailoring and styling the integration. The process is described in detail further down in this documentation.
The URL to the latest MFN Loader version:
Usage
In order to use the loader you will need to implement and configure two HTML template files:
list.html (The file that handles configuration for the news feed list page and what information/elements will be rendered)
single.html (The file that handles configuration for a single news item
In the list.html
template configuration (Which is the main file) you define the path to the HTML file of the single news item template, this would be 'single.html'.
Below we provide the HTML code to the files that implements the loader.
list.html (Example)
(HTML template for the list view)
single.html
(HTML template for single view)
Customization
The MFN Loader gives you a flexible way to implement your news feed into a div element on your page. There are many customization options available for you in order to setup the feed as you like. Below we list the different options available.
List options
Option | Setting |
outlet (The selector of the element where the content of the news archive should end up) | eg. |
l10nLang (The set language used by the loader itself) | eg. |
type (The type of view) | eg |
feed_id (The Feed ID which we have provided) | eg. |
single_view_url (Path to the page where a single view version has been implemented) | eg. |
disclaimer_redirect_tag (Tag that triggers opening disclaimer template, when clicking on press release) | usually: |
disclaimer_redirect_url (The URL for the disclaimer template) | eg. |
lang (Default language of the news items shown) | eg. |
limit (Default limit of amount of items shown) | eg. |
show_summary (Shows a preamble/summary of the article) |
|
summary_len (Set preferred length of the summary, default: 250) | eg. |
summary_cut (Limit length of summary to 'summary_len') |
|
show_tags (Define which tags to be shown) | eg. |
tags (Define which tags to be filtered on) | eg. |
show_attachments (Show attachments) |
|
clickable_tags (If the tags in the list should be clickable) |
|
toolbar (An array with objects of toolbar items) | See section Toolbar |
l10n (Your own translations, to override text selection or add for other l10n languages) | eg. |
show_info (Show additional filter info above the news list) |
|
show_notfound (Show 'not found' element if filter yield no results) |
|
notfound_tmpl (Override default 'not found' element) | eg. { en: |
use_proxied_attachment_urls (Enables proxy urls for attachment links, should most likely be true) |
|
show_date (Shows the date) |
|
show_select_info (Shows for example 'All (Categories)' in select inputs) |
|
date_setting | See section Date configuration |
Single options
Option | Setting |
outlet (The selector of the element where the content of the news archive should end up) | eg. |
type (The type of view) | eg. |
l10nLang (The set language used by the loader itself) | eg. |
feed_id (The Feed ID which we have provided) | eg. |
lang (Default language of the news items shown) | eg. |
show_tags (Define which tags to be shown, default are: ":regulatory", "sub:report:annual" and "'sub:report:interim" ) | eg. |
show_attachment_thumbnail (If attachments should show as thumbnails instead of regular links) |
|
attachment_thumbnail_size (Preferred attachment thumbnail size) | eg. |
use_proxied_attachment_urls (Enables proxy urls for attachment links, should most likely be true) |
|
show_date (Shows the date) |
|
title_prefix (Optionally add a prefix to the tab title Meta description) | eg. |
show_primary_image (Shows a primary image) |
|
Toolbar options
The toolbar includes a few different items. By removing and adding items, you can decide what items it will include on the page.
search (Show search input field, enable search, set search debounce time/delay)
category (Show category/tags select dropdown, use default tags or set specific categories/tags to be in the list)
year (Show year select dropdown, set start year which will populate a list until the current year)
lang (Show language select dropdown, define languages to be in the dropdown)
clear (Show clear button)
Toolbar
Translations
You can create your own translations and add several languages for the labels of items in the toolbar, as shown in example below. If not set, it will use our default translations.
Date configuration
You can configure locale and time zone for the date or add a custom date formatter, as in the below example.
(Read the reference here **to learn more about setting up toLocaleTimeString**)
Post processing
If you would like to implement your own HTML for a news item into the DOM you can use the post processor as shown below.
The post processor can also be used for just reordering or modifying the already generated DOM for the item as shown in this example that simply swaps the order of the title and the date.
Styling / Themes
As all elements has classes with name convention starting with 'mfn-', it is easy to add your own CSS to change the look of the news list and a single news item, to match your current website theme and design.
Example:
We also provide a couple of CSS themes for the List template, to make it easier to choose the right direction style-wise when integrating the MFN Loader:
Default (is used in list.html)
Flat (Theme which is optimised for minimalistic design which is content focused, is used in list_flat.html)
Grid (Theme which is optimised for a PR-view with images, is used in list_grid.html)
Feel free to use our styling, but don't forget to add the company's graphical profile!
Pagination
The loader has a built-in pagination, and 'Previous' and 'Next' buttons are visible depending on the amount of items in the list shown, which is determined by the 'limit' value. You can customize the button design with CSS by targeting the classes mfn-prev
and mfn-next
Disclaimer
This section goes through how you enable a Disclaimer-functionality in the MFN Loader.
Disclaimer config
To make it possible to prevent direct accessing a specific press release and instead redirect to a "Disclaimer wall" before being able to view it, we've built in some extra functionality and added a couple of additional options to the config:
The first, disclaimer_redirect_tag
is to specify the tag which will trigger the redirect to the Disclaimer wall. The tag "cus:disclaimer" is a custom tag that's included in certain press releases that should be behind a disclaimer.
The second, disclaimer_redirect_url
is which URL/html-page it will redirect to.
It is important to add these config options both to the list.html and single.html-template in order to prevent direct access to the single release.
Disclaimer-form template
We provide a sample Disclaimer-form template disclaimer.html
to simplify adding a "disclaimer wall" to a particular release in the press releases list. The disclaimer.html-file is a modified single.html-template that has some additional javascript code and example HTML in it to handle the logic of going to the next steps and handles redirecting you back to the press release when done.
It consists of two parts. The first is a placeholder div for the introduction text and has a dropdown for selecting the country the user resides in together with a continue button. If a country is selected that is not included in the array of allowed countries it will show a div with an error. Else it will continue to the second part.
The second part shows a placeholder for a complete legality text and has a container which renders two radio buttons, to either confirm or deny the terms. If you deny you cannot proceed to the next page, if you accept it will proceed to show the single press release.
Last updated