iFrame Dashlet to Modal Container

[Fehu]

Hi Group.

I have used the iFrame Dashlet on the front page of the CRM to reference additional content. I would like to click a link and display a modal container something like the graphics below. Any assistance with this would be appreciated.

Thanks!
Marcus

[ChrisSka83]

Hello,
I would like to revive this somewhat older topic here, because I am looking for exactly such a thing.

The problem:
I have created a separate dashlet on the dashboard, where with buttons a kind of workflow is listed, based on which the users see exactly how they should proceed in which order.
I then linked these buttons to the associated entities.
But now I want the associated entities to be opened as modals.
Just like it is used via the quick selection "top right the plus".
At the moment only the entity is opened.
Can this be solved easily or is it a bit trickier?

[Kharg]

Hi, yes, it’s definitely possible, what dashlet are you using?

[ChrisSka83]

Hy, have built my dashlet on this tutorial.
However, custom modals are displayed here. I just want the small details of an entity to be displayed instead of the big ones.
So that you stay on the dashboard, and from there you can create the individual entries.
So there should be a simpler variant, instead of always top right -> on plus -> new entry.
So that the users know exactly which entries, in which order they should create.

[ChrisSka83]

Thanks for the tip.
Either I'm too blind to include it or it's not really what I'm looking for.

I have inserted 7 buttons in the dashlet.
These should only call the "create" for the corresponding entities. So that I can make all the entries without having to leave the dashboard.

So it's more or less the same as when I add an entry via the plus in the top right-hand corner, but clearer and easier to understand.

Can I make this possible with your tip or is it something else?

[Kharg]

Do they open full view for create?

it depends on what you want to achieve.

But if you already got a working solution that you are satisfied with I guess you don't need edit your code

[rabii]

Hey,

do you mean you want to use detailSmall view to create entities from a dashlet? tbh not sure yet what you want to achieve. can you share some screenshot so we could help if we can

[ChrisSka83]

At the moment, only the full view opens when I click on a button from the dashlet.

But my question was whether you can also access the modal view in this way, i.e. the small view in a window.
The screen shot shows this window, which is opened via the plus.
In the background you can see a button, for example, which should do the same or the 6 next to it, which you can't see at the moment.

[Kharg]

Yes, it should definitely be possible, just take a look at how espo does quickView/quickEdit action

[ChrisSka83]

Yes, I already had the idea.

When I look at how the links are opened,
I only get the following code:

<a href="#Contact/create" data-name="Contact" data-action="quick-create">Contact</a>

Unfortunately, you can not take over 1:1. I still only get to the full view.

[rabii]

Hey ChrisSka83

If you are trying to create a custom dashlet and want to have create to show (detailSmall) then you just need to extend the correct class to your custom dashlet view, e.g for a custom dashlet that shows only Accounts it would be done ad below:

define('custom:views/dashlets/accounts', ['views/dashlets/abstract/record-list'], function (Dep) {

    return Dep.extend({

        name: 'Accounts',
        scope: 'Account',
        listView: 'views/record/list-expanded',
        rowActionsView: 'views/record/row-actions/view-and-edit',
    });
});
​ 

This view (views/dashlets/abstract/record-list) has already a create which is based on detailSmall (modal view). Of course you can customise the view as you wish this is just a quick demonstration.

Hope this help

[ChrisSka83]

Tried to paste that.
But now get an "Error 404".

Somewhere there is a thinking error from me.

Now there is a new point in the right corner of my own dashlet, but all my buttons are gone.

define('custom:views/dashlets/ablauf', ['views/dashlets/abstract/record-list'],  function (Dep) {
    return Dep.extend({
        name: 'Workflow - Ablauf',
        template: 'custom:dashlets/ablauf',
        scope: 'Contact',
        listView: 'views/record/list-expanded',
        rowActionsView: 'views/record/row-actions/view-and-edit',
    })
});​ 

[rabii]

> Now there is a new point in the right corner of my own dashlet, but all my buttons are gone.

i can't see wthe point ?

can you share your previous code

[rabii]

Please when you copy the code from here you need to clean it, automatically a red dot will be copied at the end of the code so please pay attention and clean the code before you use it usaully this is added to the end of the code (<0x200b>)

[ChrisSka83]

OK, I think we are talking past each other here.

Let's start again from the beginning:
I have a dashlet that goes across the entire width of the dashboard.
I want to display 7 buttons there.
These should only have the function "create".
-> create contact, create request, etc.
If I link these buttons with the entities, only the full view is displayed.
But I would like that only the small view is shown to me there.

These should serve as an overview, so that the users know in which order what they should create.

In the end, it is the same as if the user would use the quick launch bar on the top right "the plus", just more beautiful and clearer.

With your code, I just get a new menu item in the dashlet.

[rabii]

Alright here is an example of a Sales dashlet, in this example i will just create a Sales dashlet that allow the user to create (Product - Quote - Sales Order and Invoice) using detailSmall view, Please note that Fetching the collections would require additional code ( an afterRender Method which request data from the backend), see code below as an example:

1 - Create the Sales.json under Espo\Custom\Resources\metadata\dashlets\Sales.json

{
  "view": "custom:views/dashlets/sales",
  "options": {
    "view": "custom:views/dashlets/options/sales",
    "fields": {
      "title": {
        "type": "varchar",
        "required": true
      },
      "autorefreshInterval": {
        "type": "enumFloat",
        "options": [
          0,
          0.5,
          1,
          2,
          5,
          10
        ]
      },
      "enabledScopeList": {
        "type": "multiEnum",
        "translation": "Global.scopeNamesPlural",
        "required": true
      },
      "displayRecords": {
        "type": "enumInt",
        "options": [
          3,
          4,
          5,
          7,
          10,
          15,
          20,
          30,
          50
        ]
      }
    },
    "defaults": {
      "displayRecords": 10,
      "autorefreshInterval": 0.5,
      "enabledScopeList": [
        "Product",
        "Quote",
        "SalesOrder",
        "Invoice"
      ]
    },
    "layout": [
      {
        "rows": [
          [
            {
              "name": "title"
            },
            {
              "name": "autorefreshInterval"
            }
          ],
          [
            {
              "name": "displayRecords"
            },
            {
              "name": "enabledScopeList"
            }
          ]
        ]
      }
    ]
  }
}​ 

2 - Create the custom view for the dashlet under client\custom\src\views\dashlets\options\sales.js

define('custom:views/dashlets/options/sales', ['views/dashlets/options/base'], function (Dep) {

    return Dep.extend({

        init: function () {
            Dep.prototype.init.call(this);

            var entityTypeList = [];

            // Define your scopes here
            var salesEntityList = ['Product', 'Quote', 'SalesOrder', 'Invoice'];

            salesEntityList.forEach(item => {
                if (this.getMetadata().get(['scopes', item, 'disabled'])) {
                    return;
                }

                if (!this.getAcl().checkScope(item)) {
                    return;
                }

                entityTypeList.push(item);
            });

            this.fields.enabledScopeList.options = entityTypeList;
        },
    });
});​ 

3 - Create the custom view for the dashlet under client\custom\src\views\dashlets\sales.js

define('custom:views/dashlets/sales',
['views/dashlets/abstract/base', 'multi-collection'], function (Dep, MultiCollection) {

    return Dep.extend({

        name: 'Sales',

        templateContent: '<div class="list-container">{{{list}}}</div>',

        rowActionsView: 'views/record/row-actions/view-and-edit',

        defaultListLayout: {
            rows: [
                [
                    {
                        name: 'ico',
                        view: 'crm:views/fields/ico',
                        params: {
                            notRelationship: true
                        }
                    },
                    {
                        name: 'name',
                        link: true,
                    },
                ],
                [
                    {name: 'createdAt'}
                ]
            ]
        },

        listLayoutEntityTypeMap: {
            Product: {
                rows: [
                    [
                        {
                            name: 'ico',
                            view: 'crm:views/fields/ico',
                            params: {
                                notRelationship: true
                            }
                        },
                        {
                            name: 'name',
                            link: true,
                        },
                    ],
                    [
                        {name: 'createdAt'},
                        {name: 'description'}
                    ]
                ]
            }
        },

        init: function () {
            Dep.prototype.init.call(this);
        },

        setup: function () {
            this.seeds = {};

            this.scopeList = this.getOption('enabledScopeList') || [];

            this.listLayout = {};

            this.scopeList.forEach((item) => {
                if (item in this.listLayoutEntityTypeMap) {
                    this.listLayout[item] = this.listLayoutEntityTypeMap[item];

                    return;
                }

                this.listLayout[item] = this.defaultListLayout;
            });

            this.wait(true);
            var i = 0;

            this.scopeList.forEach((scope) => {
                this.getModelFactory().getSeed(scope, (seed) => {
                    this.seeds[scope] = seed;

                    i++;

                    if (i === this.scopeList.length) {
                        this.wait(false);
                    }
                });
            });

            this.scopeList.slice(0).reverse().forEach((scope) => {
                if (this.getAcl().checkScope(scope, 'create')) {
                    this.actionList.unshift({
                        name: 'createSale',
                        text: this.translate('Create ' + scope, 'labels', scope),
                        iconHtml: '<span class="fas fa-plus"></span>',
                        url: '#' + scope + '/create',
                        data: {
                            scope: scope
                        }
                    });
                }
            });
        },

        afterRender: function () {
            // add logic to fetch record from an api using the collection
        },

        actionRefresh: function () {
            // define refresh logic here optional
        },

        actionCreateSale: function (data) {
            var scope = data.scope;
            var attributes = {};

            this.populateAttributesAssignedUser(scope, attributes);

            Espo.Ui.notify(' ... ');

            var viewName = this.getMetadata().get('clientDefs.'+scope+'.modalViews.edit') || 'views/modals/edit';

            this.createView('quickCreate', viewName, {
                scope: scope,
                attributes: attributes,
            }, (view) => {
                view.render();
                view.notify(false);

                this.listenToOnce(view, 'after:save', () => {
                    this.actionRefresh();
                });
            });
        },

        populateAttributesAssignedUser: function (scope, attributes) {
            if (this.getMetadata().get(['entityDefs', scope, 'fields', 'assignedUsers'])) {
                attributes['assignedUsersIds'] = [this.getUser().id];
                attributes['assignedUsersNames'] = {};
                attributes['assignedUsersNames'][this.getUser().id] = this.getUser().get('name');
            } else {
                attributes['assignedUserId'] = this.getUser().id;
                attributes['assignedUserName'] = this.getUser().get('name');
            }
        },
    });
});​ 

As mentioned above, this dashlet will only allow the user to create the entities you defined as scopes and it will use the detailSmall view but it will not fetch any data so the dashlet will be always empty.

Hope this helps

[ChrisSka83]

Thank you,
when I have a bit of time, I'll give it a try to see if it's what I was looking for.
I'll give you feedback then.

[ChrisSka83]

Hy Rabii,

thanks, the beginning looks already good,
but for me the main reason was these buttons you see here. I wanted to open them with a modal. At the moment I only get to the full view of the entities.
So that the users know in which order.
Is there also a linking option for this?

[rabii]

ChrisSka83

I still don't get it, what do you mean open them in the modal? these button are create button for each scope defined on the dashlet options correct ?

can you share a screen shot of what you mean by (At the moment I only get to the full view of the entities.)

[ChrisSka83]

The small menu on the right opens the small detail view of an entity.
That works so far.

But how do I link the colored buttons to the small detail view?
Currently they are linked e.g. with "#Contact/create" and then only the large detail view opens for creating, instead of the small detail view as desired.

[ChrisSka83]

Screenshot:
For example, when clicking the "Create Guest" button, this small detail view should be displayed

[rabii]

try to add this to the buttons on the template data-action="quick-create"

[ChrisSka83]

I had also had it in at the beginning, because it did not work, I removed it again.

BUT:
After a close examination of the links in the small menu, I came across the following command:

class="action"

With these it worked.

Thanks for this great support !!!!

[rabii]

you are welcome glad it worked for you now

[ChrisSka83]

In the js file I have changed the function "createSales" to "createAblauf".
In the link I call this function with data-action="createAblauf".
Because with data-action="quick-create" it didn't work either.

My link is now like this:

<a href="#Contact/create" class="action" data-scope="Contact" data-action="createAblauf"><button type="button" class="btn btn-info btn-arrow-right">Gast erstellen</button></a>