How to Access CrossUI's Internal JS Functions and Variables from External JS?

[romain]

Hello everyone,

I've been enjoying using CrossUI for the past week – it's an amazing tool! I have a question about integrating external JavaScript functions. While I've successfully included my .js file in the application using a function to append the script to the document head, and I've managed to call a function from my file using `xui.exec()`, I'm now looking to directly access global or page-specific variables and objects (e.g., GLOBAL.temp.OK, or functions like getRow on a treegrid) without passing them as function parameters. Is there a way to directly access these internal resources from my external JS functions?

Thanks for your help!

[support]

You can use "_xui_root" to access the root module or set a global var for the root module

If we have an app:

   

// The default code is a module class (inherited from xui.Module)
// Ensure that all the value of "key/value pair" does not refer to external variables
xui.Class('App', 'xui.Module',{
    Instance:{
        // Dependency classes
        Dependencies:[],
        // Required modules
        Required:[],

        // To initialize properties
        properties : {},

        // To initialize instance(e.g. properties)
        initialize : function(){
            // set a global var for the root module
            window.XUI_RootModule = this;
        },

        // To initialize internal components (mostly UI controls)
        // *** If you're not skilled, don't modify this function manually ***
        iniComponents : function(){
            // [[Code created by CrossUI RAD Studio
            var host=this, children=[], append=function(child){children.push(child.get(0));};
            
            append(
                xui.create("xui.UI.HTMLButton")
                .setHost(host,"xui_ui_htmlbutton3")
                .setLeft("7.619047619047619em")
                .setTop("2.2857142857142856em")
                .setCaption(" Click me")
                .onClick([
                    {
                        "desc" : "Action 1",
                        "type" : "other",
                        "target" : "msg",
                        "args" : [
                            "Hello",
                            "World"
                        ],
                        "method" : "alert",
                        "onOK" : 2,
                        "event" : 1
                    }
                ])
            );
            
            return children;
            // ]]Code created by CrossUI RAD Studio
        }
    }
});

   

Then, you can access the inner button:

Use _xui_root:

Code: Select all

_xui_root.xui_ui_htmlbutton3.getCaption()

Use customized global var:

Code: Select all

XUI_RootModule.xui_ui_htmlbutton3.getCaption()

[romain]

I found how to access XUI functions from outside, in an external JS
Example to post a global message :

xui.broadcast(arg1, arg2, arg3....);

By this way, I can send data from an external JS function to inside CrossUI interface

Perhaps, is there another ideas to do this ?

[support]

Yeah, "xui.broadcast" is another way. And "xui.MessageService"

[romain]

Thank you for your replies. It will help me soon when I will need.

Another thing, to access to my input forms and change css to tell user there is something wrong in form submit to api, I did this :
Do you think there is a better idea to do this ?

Code: Select all

// ---------------------------------------------------------------------------------------------------------------------------------
// error_form_manage_js: manages form errors, returns an object with the main reason and error messages
// ---------------------------------------------------------------------------------------------------------------------------------
function error_form_manage_js(form_name, json_errors) {
console.log(form_name, json_errors.error);

// If we have one or more errors reported by the API
var field_messages = [];

// Remove all classes named 'error-highlight' from the page
$('.error-highlight').removeClass("error-highlight");

// If we have innerExceptions
if (typeof json_errors.error.InnerExceptions != "undefined" && json_errors.error.InnerExceptions != null) {
    // Loop through json_errors.error.InnerExceptions
    for (var i = 0; i < json_errors.error.InnerExceptions.length; i++) {
        var field_name = json_errors.error.InnerExceptions[i].Keys[1];
        // SQL field concerned: reason for the problem
        field_messages.push(field_name + " : " + json_errors.error.InnerExceptions[i].ReasonPhrase);

        // Flashing the field in red for 1 second
        $('[name=' + field_name + ']').addClass('error-highlight');
    }
}

// Return the main reason and the list of messages to CROSSUI if they exist
return { 
    "ReasonPhrase": json_errors.error.ReasonPhrase, 
    "global_msg": field_messages.join("\r\n<br") 
};

}

(function() {
// When everything is loaded

// Creating a dynamic CSS class
var errorClass = document.createElement('style');
errorClass.innerHTML = `
.error-highlight {
    background-color: #FFCCCC !important;
    border-color: #F00 !important;
    border-width: 2px !important;
    box-shadow: 0 0 5px #F00 !important;
    color: #F00 !important;
    font-weight: bold !important;
    animation: fadeInOut 1s ease-in-out;
}

@keyframes fadeInOut {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
`;

// Adding the class to the DOM
document.head.appendChild(errorClass);
})();

[support]

It's OK to do things this way.
But I suggest you add all CSS in a static file and only modify the DOM's class name dynamically.