How to use modules features in Dialog pages

Tue, 28 Mar 2017 16:25:22 +0000

Hi,

Recently I had to implement a feature in Efficy that would allow the user to interact with some custom data through different pages. Those pages were not related to any entity nor records of the CRM.

the use of dialogs appeared to me to be the best practice, so my problematic was to open an empty page (dialog) that would allow me to use the data-msg and data-channel and commands features in custom modules. This post is here to explain how to make this works all together.

Behold, you will need a good understanding of the modules overrides techniques, and how macros works.

First step : create your page template

so there is a test2.htm template that I ve put in :
customs\Test\pages\dialog\test2.htm

<%SetBookmark()%>
<%LoadMacros('MacroLibrary;MacroDialog')%>
<%Macro('Doctype')%>
<html lang="<%GetLanguage(lowercase=T)%>" dir="<%OnLanguage(ar='rtl', else='ltr')%>">
<head>
    <title>test</title>
    <%Macro('MetaHead')%>
    <%UseStyleSheet(page='%%OnLanguage(ar="efficy-rtl", else="efficy")')%>
    <%UseScript('../lib/js/vendor/modernizr.js', fixedline=T, fixedpath=T)%>
</head>
<body onload="Loaded()" data-keep-size>
<div class="row dialog-wrapper" data-channel="dialog/main">
    <div class="small-12 columns">
        <h3 class="section-title"><%GetLabel('My dialog is awesome')%></h3>

        <div class="toolbar medium" data-channel="dialog/main">

            <button class="action i-add" data-msg="msgAddChart" type="button"></button>

        </div>
</div>
<!--</body>-->
<%Macro('DialogScriptsRequire')%>
</body>
</html>

some explaination:

As you can see I already add a data-channel class in my wrapper and a data-msg in my button. (it's not a guide step by step, it s more a file by file^^)

the MacroLibrary file and MacroDialog are the 2 only macro files I wanted to need to make it work but feel free to use some more for your personnal customs.

2nd step : Override MacroDialog

The DialogScriptsRequire is loaded in the body to respect the architecture and async loads spirit.

this is what you ll find in my MacroDialogCustomFile :

MainJsModuleCustom {[custom/main/dialog]}

This will allow me to completely override the main dialog module.

RequireConfigCustom {[
    <%UseScript('custom/js/config/require.config.js')%>
]}

since I will need to override some module I will need to edit my custom require.config file so I need my dialog to know that the custom file has to be loaded.

3rd step : override the main/dialog module

Implement the main/dialog module now : this is what i ve put in my custom/main/dialog.js file :

define([
    'domReady!',
    'jquery',
    'class',
    'windowManager',
    'config/foundation',
    'custom/commands/dialogCmd',
    'commandPublisher'
], function (doc, $, Class, WindowManager, Foundation, DialogCmd, CommandPublisher) {

    var dialog = new (Class.extend({

        start: function() {
            console.log("Custom module dialog.js started");
            window.__debug = true;
            $(document).foundation();
            WindowManager.start();
            DialogCmd.start();
            CommandPublisher.start();
        },

        stop: function() {
            WindowManager.stop();
        }

    }))();

    // Auto start when loaded via data-main
    dialog.start();

    return dialog;
});

you will probably recognize the standard dialog module with more modules :

custom/commands/dialogCmd : a full custom modules that will be in
charge to have all the commands I need (just a test function in my
example)
commandPublisher : the module that will transform a data-channel/data-msg classes in events emitters

these modules are started on start and I ve added a console log and a __debug = true to monitor in firebug that my code is well loaded.

step 4 : create a custom/commands/dialogCmd module

This is my dialogCmd minimum code :

define([
    'jquery',
    'constants',
    'model',
    'browser',
    'commandListener',
    'format',
    'url'
], function($, Const, Model, Browser, CommandListener, format, Url) {
    console.log("custom module dialogCmd loaded");

    function test(){
        alert("test ok");
    }

    var commands = {
        "msgTest" : test,
    };

    return new CommandListener(Const.VIEW_CHANNEL + 'dialog/main', commands);
});

the only required modules here are :

constants
commandListerner

the rest is here because I like those modules and I did intend to use it later.

5th step : double check...

you will need to check in your console when your dialog is loaded that you will have this :

but right now you won't cause you probably have not edit your require.config.js file there is the line you will have to add :

require.overrideModule('commands/dialogCmd');

I know you are not overriding any existing module but, if it's stupid and it works... it's not supid.

I am pretty sure plenty of optimizition are makable, feel free to answer this post to improve the solution I ve found.

Cheers, May ficy be with you folks

Efficy Overflow Q&A - Recent questions tagged modules

How to use modules features in Dialog pages