Activities of "Spospisil"

Hi,

If you use the code I provided you should be able to reproduce it as when I create a tiered solution in ABP suite and then add the code I provided it'll reproduce the issue for you.

Steve

Hi,

Ok, you are correct. For some reason it's now working for me as well. I 'cleaned' the solution in VS 2022, rebuilt the entire solution and it appears to be working now.

I will integrate this into my actual solution, but I think I'm going to then write up a whole article on how to get the DevExpress Dashboard control to work with ABP since there seems to be a lot of other users attempting to do the same thing I am trying to do.

Thanks.

Steve

Ok, let me take a closer look.

‘Yes’ you changed something?

Hi,

That is bizzare. You didn’t change anything about the projects?

Hi,

I need an update on this issue please

Hi,

Well, you could run it too and you'll see the error too as I've given you access to the github repo and detailed out the steps to reproduce but I'll do that for you so here is the error.

'Volo.Abp.Http.Client.AbpRemoteCallException: An error occurred during the ABP remote HTTP request. (The operation was canceled).

Hi,

Any update on this?

Hi,

I'm still confused by your response. As you previously stated (before I provided a solution) tiered projects will not work in the manner that I was trying to use it in. Now your taking random statements from my code and adding comments that seem to be at the very least out of context.

Since I gave an example on how ABP users can get around the issue I was having, this ticket can be closed. Please don't deduct from my support question quota.

Hi,

I'm a little disappointed with your answer overall as you are suggesting that if you use an ABP tiered solution approach you cannot use the DevExpress UI. I'm pretty sure if that were the case it would affect the number of organizations that use ABP's framework to develop their enterprise solutions with as DevExpress is a popular web control provider.

That being said I feel what you should have probably explained or suggested is that if DevExpress had a way to call the tiered solution's API layer from the misc. control's functions via JavaScript then all ABP's inherent functionalities would work as advertised as the Application layer would function as expected.

Simple answers like 'because tiered project' and 'you can use DevExpress ui in a monolithic application' are not very helpful to ABP's user base as it does not offer any possibilities of how to get 3rd party controls to work with ABP.

Despite this, after doing some more research, the solution to utilizing the DevExpress Dashboard control, was to call my ABP tiered solution's Web API layer by using JavaScript to find the 'Save' menu item on the Dashboard and overriding the .Click event with an ajax call to the API's endpoint.

In this way DevExpress will recognize ABP's 'Application Service' so you can pass along any relevant data to your ABP service while giving you access to all of ABP's build in dependency injected services.

JavaScript needed

function onBeforeRender(sender) {
    var dashboardControl = sender;
    
    dashboardControl.registerExtension(new DevExpress.Dashboard.DashboardPanelExtension(dashboardControl));
    var toolboxExtension = sender.findExtension("toolbox");
    if(toolboxExtension) {
        var saveMenuItem = toolboxExtension.menuItems().filter(function (menuItem) { return menuItem.id == 'save' })[0];
        
        if(saveMenuItem) { 
        
            saveMenuItem.click = function(s, e) {
                //Save the variable
                var xml = dashboardControl.dashboard().getJSON();

                var apiurl = abp.appPath + "api/DashboardSample/Test/save-function/" + "123";

                console.log(apiurl);
                $.ajax({
                    url: apiurl,
                    type: "POST",
                    dataType: "json",
                    data: { dashboardDef: JSON.stringify(xml) },
                    success: function (result) {
                        console.log("Success!");
                    },
                    error: function (xhr, textStatus, errorThrown) {
                        alert('Request Status: ' + xhr.status + '; Status Text: ' + textStatus + '; Error: ' + errorThrown);
                    }
                });
            };  
        }
    }
}