Navigation Menu

Function Content

Content generated by a function

function content type allows you to generate content using a function. The function can be a valid anonymous, global, static or instance function, or a global function name. The function must return the content as string!
There are 3 parameters that relates to function content type.
  • functionName - Name of global function or any valid JS function (anonymous/global/static/instance)
  • functionArguments - Any arguments you may want to pass to it. As, the function is called with one argument only, if you need to pass multiple values, use an object or array instead.
  • functionThis - Any value you want to set as this inside the function. And, yes! you can set a this inside a JS static function!
Jump to section -
  1. Using anonymous method
  2. Using static and instance method
  3. Using global function or function name
Using an anonymous function.

This section demonstrate all 3 parameters in action.

ModalManager.instance.addModal({
    body: {
        contentType: 'function',
        functionArguments : {
            name : 'Anjan',
            hobby : ['reading','gaming']
        },
        functionThis : {
            'text' : 'this can be anything!'
        },
        functionName: function () {
            return `<div class="text-warning">
Some content from function<br><br>
Arguments: ${JSON.stringify(arguments)}<br><br>
this: ${this instanceof Window ? 'window' : JSON.stringify(this)}
</div>`;
        }
    }
});
Using a static or instance function.

First we are going to use an ES6 class Person for demo.

class Person {

    name = '';

    constructor(name) {
        this.name = name;
    }

    static hello() {
        return `<div class="text-info">Hey there! calling static!</div>`;
    }

    hello() {
        return `<div class="text-success"> Hi ${this.name}! Called instance!</div>`;
    }
}

And, then here is how it can be called statically

ModalManager.instance.addModal({
    body: {
        contentType: 'function',
        functionName: Person.hello,
    }
});

And, here is how instance method can be used - 

const person = new Person('George');

ModalManager.instance.addModal({
    body: {
        contentType: 'function',
        functionName: person.hello,
        functionThis: person
    }
});

Note how functionThis was used to pass the person object? The system executes the given function using apply, so without explicitly passing the this reference, the instance method has no way to knowing to which instance it belongs to. Thus breaking any other method calls belonging to same instance.

This will be a significant issue, if you encapsulate your UI building login inside a class, where you will be breaking the process in multiple functions. so by passing the instance of ur class to functionThis you can smoothly execute your instance functions.

Using a global function or function name.

First we are going to use this dummy global function - 

function __a_global_function() {
    return `<h2>A global function</h2><br>
    
    this: ${this instanceof Window ? 'window' : JSON.stringify(this)}<br><br>
    
    Arguments: ${JSON.stringify(arguments)}
`;
}

And, then we use it like this

/**
* As function ...
*/

ModalManager.instance.addModal({
    body: {
        cssClass : 'bg-info',
        contentType: 'function',
        functionName: __a_global_function,
        functionThis: 'what is this?',
        functionArguments: [1,2,3,4,'As function']
    }
});

/**
* As function name ...
*/

ModalManager.instance.addModal({
    body: {
        cssClass : 'bg-warning',
        contentType: 'function',
        functionName: '__a_global_function',
        functionThis: 'what is this?',
        functionArguments: [1,2,3,4,'As function name']
    }
});