Picture of Chris Gillison
article mobile instruction
by Chris Gillison - Thursday, 17 May 2018, 7:24 PM

Hi all,

I need to apply the narrative instruction funtionality (whereby the desktop instruction text is swapped out for a  mobile instruction text on small devices.

I can kind of see what's happening in adapt-contrib-narrative.js in that there's a reRender() function that triggers the replaceInstructions() if the device is small, but I can't find a similar .js file for an article that I could start adding the code to. I looked in the core/js folder but anything relating to articles is sparse to say the least!

Is something like this possible, and could anyone offer some suggestions on how to go about it?

Thanks and regards,


Picture of Aaron Collier
Re: article mobile instruction
by Aaron Collier - Friday, 18 May 2018, 10:06 AM

It seems to me that adapt-contrib-narrative.js is extending the view for components. So if you want to add a similar functionality for articles, I think you'd have to either write a new module extending the ArticleView (as adapt-contrib-narrative.js does for the ComponentView) or modify the articleView.js file in core/js/views.

I'd consider just adding a component at the top of the article that can display different instructions for mobile and not, but I don't know your specific use case.

Picture of Ignacio Cinalli
Re: article mobile instruction
by Ignacio Cinalli - Friday, 18 May 2018, 7:10 PM

Hi Chris, I think that extending the articleView and articleModel could be the best option.

However, you can also try to change the articles.json file:

        "_id": "a-01",
        "_parentId": "co-01",
        "_type": "article",
        "_classes": "",
        "title": "",
        "displayTitle": "Article title ",
        "instruction": "Article instruction",
        "mobileInstruction": "Article mobile instruction",      
        "body": ""


And then in your theme (E.g. src -> theme -> adapt-contrib-vanilla > vanilla.js

define(function (require) {

    var Adapt = require('coreJS/adapt');

    Adapt.on('device:changed', replaceArticleInstruction)

    function replaceArticleInstruction() {
        _.each(Adapt.articles.models, function (element, index) {
            if (element.has('mobileInstruction')) {
                var _replaceText = element.get('instruction')
                if (Adapt.device.screenSize =='small') {
                    _replaceText = element.get('mobileInstruction')
                $('.article'+'.'+ element.get('_id')).find('.article-instruction-inner').html(_replaceText)
    Adapt.on('articleView:postRender', function (view) {



Picture of Chris Gillison
Re: article mobile instruction
by Chris Gillison - Monday, 21 May 2018, 6:40 PM

Hmmmm. Thanks Ignacio. This looked really promising. No error messages, but unfortunately I lost all the page contents. I think I'm going to have to think of something else - not sure my javascript is up to extending those models yet.

Picture of Chris Gillison
Re: article mobile instruction
by Chris Gillison - Sunday, 26 May 2019, 6:43 AM

Hi Ignacio.

Just wanted to let you know (and anyone else looking for this functionality) that your code works like a dream! It was my initial implementation of it that was wrong! Many many thanks for it!

Picture of K Edison
Re: article mobile instruction
by K Edison - Wednesday, 17 July 2019, 2:14 PM

I am using Adapt-blinds component and the Instruction does not convert to Mobile Instruction. I was wondering if you were able to get the mobile instruction within the component or is it on the article? I would like the instruction to be under my title and body text where it normally goes.

Picture of Chris Gillison
Re: article mobile instruction
by Chris Gillison - Monday, 21 May 2018, 6:44 PM

Thanks Aaron. I thought it might not be a straightforward couple of lines of code! Interesting thought on adding an extra component. I'll have a think.