Example: MFN JS-Loader

# MFN JS-Loader ## 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: {% file src="/files/-MahnVJqCzyVQkN6APlh" %} mfn-js-loader-template-zip {% endfile %} 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 **\** with your Entity ID which you received from us 3. Upload the files to your server (remote or locally) 4. Go https\://\/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: {% hint style="info" %} {% endhint %} ## 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) ```markup Example: MFN JS-Loader

MFN JS-loader

This is an example template which should be customized to fit your specific design, by making changes in the provided CSS-files in the

assets/css

folder and by configuring the files

list.html

and

single.html

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

Press releases

``` ### single.html (HTML template for single view) ```markup MFN JS-Loader

``` ## 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" ) | eg. `default` or `[{tag: ':regulatory'}]` See the detailed tag definition list [**here**](https://modfin.gitbook.io/mfn/-LRMjppiwci9_gPjsMUx/models/news-item#model-3). | | **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** ```javascript 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. ```javascript // 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. ```javascript // 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' }); } ``` (Read the reference [**here**](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString) 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. ```javascript // Example of implementing your own html for a news item post_processor: function(current, item){ console.log(item) return '

' + item.content.title + '

' } ``` ## 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: ```css #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. {% hint style="info" %} 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. {% endhint %} #### 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. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://modfin.gitbook.io/mfn/-LRMjppiwci9_gPjsMUx/misc/mfn-js-loader.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.