MFN
  • What is MFN
  • Getting started
    • Starting integration
    • Anatomy of an integration
  • Models
    • News Item
Powered by GitBook
On this page
  • Description
  • Getting started
  • Usage
  • list.html
  • single.html
  • Customization
  • List options
  • Single options
  • Toolbar options
  • Toolbar
  • Translations
  • Date configuration
  • Post processing
  • Styling
  • Pagination
  • Disclaimer

Was this helpful?

  1. Integrations

MFN JS-Loader

Last updated 8 months ago

Was this helpful?

Description

The MFN JS-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:

  1. Download the zip package from the link above and extract the content

    mfn-js-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)

    • archive.html (A customisable Report archive template)

    • disclaimer.html (A customisable Disclaimer template)

    • list.html (The HTML template with configuration options for the news list)

    • list_multi.html (An example with multiple instances of news list)

    • single.html (The HTML template with configuration options for a single news item)

  2. Then edit both list.html and single.html and replace the text <AUTHOR ENTITY ID> with your Entity ID which you received from us

  3. Upload the files to your server (remote or locally)

  4. 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 JS-Loader version:

Usage

In order to use the loader you will need to implement and configure two HTML template files:

  1. list.html (The file that handles configuration for the news feed list page and what information/elements will be rendered)

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

(HTML template for the list view)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Example: MFN JS-Loader</title>
        <link rel="stylesheet" type="text/css" href="assets/css/general.css">
        <link rel="stylesheet" type="text/css" href="assets/css/list.css">
    </head>
    <body>
        <div id="wrapper">
            <div class="mfn-heading-h1">MFN JS-loader</div>
            <div class="introduction">
                This is an example template which should be customized to fit your specific design, by making changes in the provided
                CSS-files in the <div class="documentation-highlight">assets/css</div> folder and by configuring the files <div class="documentation-highlight-file">list.html</div> and <div class="documentation-highlight-file">single.html</div>.
                <div class="documentation-container">
                    The different options are explained short in the commentary in the html-files. However, to go into depth with the details on how you can tailor the plugin visit our documentation <a href="https://modfin.gitbook.io/mfn/-LRMjppiwci9_gPjsMUx/misc/mfn-js-loader" class="documentation-link">here</a>.
                </div>
            </div>

            <div class="mfn-heading-h2">Press releases</div>

            <!-- The container where the content will end up -->
            <div id="container" class="content"></div>
        </div>
    </body>
    <script  type="application/javascript">

        // Implements the MFN-JS Loader javascript file
        if(!window._MFN) {
            var s = document.createElement("script");
            s.type = "text/javascript";
            s.src = "https://widget.datablocks.se/api/rose/assets/js/mfn/mfn-js-loader-v0.1.2.js";
            s.async = true;
            document.getElementsByTagName("body")[0].appendChild(s);
        }

        window._MFN = {
            // The selector of the element where the content of the news
            // archive should end up
            outlet: '#container',

            // Default language of the news items shown
            lang: 'sv',

            // 'selected' uses locale from lang, other options are 'en', 'sv'
            // and so on
            l10nLang: 'en',

            // The type of view
            type: 'listview',

            // Author Entity ID provided
            entity_id: '<AUTHOR ENTITY ID>',

            // Path to the page where a single view version has been implemented
            single_view_url: 'single.html',

            // Enable if you want to activate a disclaimer page for news items
            // of a specific tag
            //disclaimer_redirect_tag: 'cus:disclaimer',
            //disclaimer_redirect_url: 'disclaimer.html',

            // Default limit of items shown
            limit: 20,

            // Adds the preamble of the article
            show_preamble: true,

            // 'default' (:regulatory, sub:report:annual, sub:report:interim)
            // or add your own eg [{tag: ':regulatory'}]
            show_tags: 'default',

            // Show attachments
            show_attachments: true,

            // Enable clickable tags
            clickable_tags: true,

            // Toolbar
            toolbar: [
                {
                    // show search
                    item: 'search',
                    // placeholder text for input search field
                    placeholder: 'Search',
                    // if true an Ajax search is added to the search bar
                    live_search: true,
                    // the debounce time for the ajax search if enabled
                    live_search_delay: 300
                },
                // 'default' or [{tag: ':regulatory'},
                // {tag: 'sub:report:interim'}] etc.
                {item: 'tags', tags: 'default' },
                {item: 'year', start: 2010},
                {item: 'lang', languages: ['sv', 'en']},
                {item: 'clear'}
            ],
            // Your own local to override text selection or add for
            // other l10n languages (For the toolbar text and tags)
            l10n: {
                'Search': {
                    en: 'Search',
                    sv: 'Sök',
                }
            },

            // Show additional filter info, default: false
            show_info: false,
            // Show not found element, default: false
            show_notfound: false,

            // Override default 'not found' element
            // notfound_tmpl: {
            //  en: '<div class="mfn-notfound"><span>Couldn\'t find any news articles.</span></div>',
            //  sv: '<div class="mfn-notfound"><span>Kunde inte hitta några nyhetsartiklar.</span></div>'
            // },

            // Should most likely be true (Enables proxy attachments)
            use_proxied_attachment_urls: true,

            // Shows the date
            show_date: true,

            // Example of configuring locale and time zone,
            // Swedish timezone is default if date_setting is not set
            // date_setting: {
            //     locale: 'sv-SE' // eg. for US 'en-US',
            //         option: {
            //         month: 'numeric', // or 'long', 'short'
            //         year: 'numeric', // or '2-digit'
            //         day: 'numeric', // or '2-digit'
            //         timeZone: 'Europe/Stockholm' // eg. 'America/New_York'
            //     }
            // }

            // If you want to implement your own custom date formatter
            // you can add your own function
            // format_date: function(date) {
            //     return date.toLocaleTimeString('sv-SE', {
            //         month: 'long',
            //         year: 'numeric',
            //         day: 'numeric',
            //         timeZone: 'Europe/Stockholm'
            //     });
            // }

            // Example of implementing your own HTML for a news item
            // post_processor: function(current, item) {
            //  console.log(item)
            //     return '<div>' + item.content.title + '</div>'
            // }

        }
    </script>
</html>

single.html

(HTML template for single view)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>MFN JS-Loader</title>
        <link rel="stylesheet" type="text/css" href="assets/css/general.css">
        <link rel="stylesheet" type="text/css" href="assets/css/single.css">
    </head>
    <body>
        <div id="wrapper">
              <!-- The container where the content will end up -->
              <div id="container" class="content"></div>
        </div>
    </body>
    <script type="application/javascript">

        // Implements the MFN-JS Loader javascript file
        if(!window._MFN) {
            var s =  document.createElement("script");
            s.type = "text/javascript";
            s.src = "https://widget.datablocks.se/api/rose/assets/js/mfn/mfn-js-loader-v0.1.2.js";
            s.async = true;
            document.getElementsByTagName("body")[0].appendChild(s);
        }

        window._MFN = {

            // The selector of the element where the content of the
            // single news item should end up
            outlet: '#container',

            // The type of view
            type: 'singleview',

            // Default language of the news item shown
            lang: 'sv',

            // 'selected' uses locale from lang, other options are 'en', 'sv'
            // and so on
            l10nLang: 'selected',

            // Author Entity ID provided
            entity_id: '<AUTHOR ENTITY ID>',

            // If it should show date
            show_date: true,

            // 'default' or eg [{tag: ':regulatory'}]
            show_tags: 'default',

            // Should most likely be true
            use_proxied_attachment_urls: true,

            // Show attachments
            show_attachments: true,

            // if attachments should be displayed as thumbnails (Default as links)
            // (To ensure high quality thumbnails on high resolution devices, we recommend using max size using CSS)
            show_attachment_thumbnail: true,

            // Enable if you want block the 'singleview' and instead to forward to the 'disclaimer' page
            // when the user tries to visit the 'singleview' page without first approving the disclaimer
            //disclaimer_redirect_tag: 'cus:disclaimer',
            //disclaimer_redirect_url: 'disclaimer.html',

        }
    </script>
</html>

Customization

The MFN JS-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. #container

l10nLang (The set language used by the loader itself)

eg. selected or en, sv

type (The type of view)

eg listview

entity_id (The Author Entity ID which we have provided)

eg. c00f2147-e959-6d39-c36c-93f23051e24c

single_view_url (Path to the page where a single view version has been implemented)

eg. single-view.html

disclaimer_redirect_tag (Tag that triggers opening disclaimer template, when clicking on press release)

usually: cus:disclaimer

disclaimer_redirect_url (The URL for the disclaimer template)

eg. disclaimer.html

lang (Default language of the news items shown)

eg. sv

limit (Default limit of amount of items shown)

eg. 20

show_preamble (Adds the preamble of the article)

true or false

show_tags (Define which tags to be shown)

eg. default or [{tag: ':regulatory'}]

show_attachments (Show attachments)

true or false

clickable_tags (If the tags in the list should be clickable)

true or false

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. { 'Search': { en: 'Search', sv: 'Sök' } }

show_info (Show additional filter info above the news list)

true or false

show_not_found (Show 'not found' element if filter yield no results)

true or false

use_proxied_attachment_urls (Enables proxy urls for attachment links, should most likely be true)

true or false

show_date (Shows the date)

true or false

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. #container

type (The type of view)

eg. singleview

l10nLang (The set language used by the loader itself)

eg. selected or en, sv

entity_id (The Author Entity ID which we have provided)

eg. c00f2147-e959-6d39-c36c-93f23051e24c

lang (Default language of the news items shown)

eg. sv

show_tags (Define which tags to be shown, default are: ":regulatory", "sub:report:annual" and "'sub:report:interim" )

show_attachment_thumbnail (If attachments should show as thumbnails instead of regular links)

true or false

attachment_thumbnail_size (Preferred attachment thumbnail size)

eg. 200

use_proxied_attachment_urls (Enables proxy urls for attachment links, should most likely be true)

true or false

show_date (Shows the date)

true or false

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. The toolbar enables the following filtering options:

  • search (Show search input field, enable search, set search debounce time/delay)

  • limit (Show limit select dropdown, define limit options)

  • tags (Show tags select dropdown, use default tags or set specific 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)

Toolbar

toolbar: [
            {
                item: 'search',
                
                // if true an Ajax search is added to the search bar
                live_search: true, 
                
                // the debounce time for the ajax search if enabled
                live_search_delay: 300 
            },
            // 'default' or [{tag: ':regulatory'}, {tag: 'sub:report:interim'}]
            // etc.
            {item: 'tags', tags: 'default' },
            {item: 'year', start: 2010},
            {item: 'lang', languages: ['sv', 'en']}
        ],

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.

// Your own locale to override text selection or add for other l10n languages
l10n: {
    'Search': {
            en: 'Search',
            sv: 'Sök',
    }
},

Date configuration

You can configure locale and time zone for the date or add a custom date formatter, as in the below example.

// Example of configuring locale and time zone
// Swedish timezone is default if date_setting is not set
date_setting : {
    locale: 'sv-SE', // eg. for US 'en-US'
    option: {
        month: 'short', // or 'long', 'short'
        year: 'numeric', // or '2-digit'
        day: 'numeric', // or '2-digit'
        timeZone: 'Europe/London' // eg. 'America/New_York'
    }
}

// If you want to implement your own custom date formatter
// you can add your own function
format_date: function(date) {
    return date.toLocaleTimeString('sv-SE', {
        month: 'long',
        year: 'numeric',
        day: 'numeric',
        timeZone: 'Europe/Stockholm'
    });
}

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.

// Example of implementing your own html for a news item
post_processor: function(current, item){
    console.log(item)
    return '<div>' + item.content.title + '</div>'
}

Styling

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:

#container .mfn-content .mfn-row {
    padding: 10px 0 10px;
    border-top: 1px solid;
    padding-left: 5px;
}

#container .mfn-toolbar {
    display: flex;
    flex-wrap: wrap;
    font-size: 15px;
    margin: 0 20px 50px 0;
}

#container .mfn-content .mfn-row .mfn-title {
    font-size: 16px;
    margin: 0;
    padding-bottom: 5px;
}

...

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

disclaimer_redirect_tag: 'cus:disclaimer',
disclaimer_redirect_url: 'disclaimer.html',

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.

eg. default or [{tag: ':regulatory'}] See the detailed tag definition list .

(Read the reference to learn more about setting up toLocaleTimeString)

https://widget.datablocks.se/api/rose/assets/js/mfn/mfn-js-loader-v0.1.2.js
here
here
18KB
mfn-js-loader-template.zip
archive
mfn-js-loader-template-zip