Activities of "matt.fleming"

Cheers for that. I am happy that it is working, and no worries about using leptonx.createContextMenuWithin.

I more was talking about where I ended up having to call it from, the event handler issues, and the change I made to pass document.querySelector('#lpx-toolbar') instead of using the 'notification-bar' id - was just checking whether I had gone the right way with these.

Anyway it is working so I will close. Thanks again for that.

Sorry I didn't reply earlier - took me a while to get back to it and also took me a while to get it working. I did get it working, but had to make a few changes:

• An event listener was never registered if the script was in _Host.cshtml. It seemed the script was running before the notification component was rendered in the toolbar (note I am using Blazor Server, ABP 8.3.4). So, I created a separate js function and called createContextWithin from there. I called the JavaScript function from OnAfterRenderAsync in the notification component on first render.
• So far so good, but 2 event listeners were registered which seemed to cancel each other out (OnAfterRenderAsync with firstRender true was being called twice - not sure why). So, I had to add a flag to the JavaScript function which I store in the element's dataset attribute.
• Lastly, the context menu would not display. I had to change the createContextMenuWithin call to the following to get it to work. Passing the id of the parent lpx-toolbar seemed to be how user context was doing it , and this seems to work.

leptonx.createContextMenuWithin(document.querySelector('#lpx-toolbar'), 'notification-bar');

This all became a little messier than the suggested solution, so if you have a better way to achieve this, or an answer to why it didn't work using your first solution, please let me know.

Thanks!

ABP Framework version: v8.3.4

• UI Type: Blazor Server
• Database System: EF Core (SQL Server)
• Tiered (for MVC) or Auth Server Separated (for Angular): yes/no
• Exception message and full stack trace:
• Steps to reproduce the issue:

Hi

My project is using the LeptonX theme (commercial) with a side menu. I am wanting to add a button to the toolbar that toggles a context menu/pane, in a similar way to how the User and Settings buttons work. This will be for Notifications, and will pretty much look and operate like the Notification icon in the LeptonX theme demo (see screenshot).

I can add a link to the toolbar easily enough. Then, digging into the theme code, I can see that the User and Settings links are implemented with a custom attribute called 'data-lpx-ctx-toggle', and the context menu has 'data-lpx-context-menu'. JavaScript selects on these attributes, and registers event handlers so that clicking on the link shows the pop-up. I have done the same sort of thing, but no event handler gets registered for it. I am therefore assuming the 'user-context-menu' and 'settings-context-menu' are coded into the JavaScript? If this is the case, is there an accepted way to add a custom context menu like this? Or, if not the case and the JavaScript is generic in adding using these attributes, is there a way to get this to work just using these attributes?

Prototype code:

<ul class="lpx-nav-menu">
    <li class="outer-menu-item" id="notificationItem">
        <a href="#" class="lpx-menu-item-link active-menu-item" data-lpx-ctx-toggle="notification-context-menu">
            <span class="lpx-menu-item-icon">
                @* <small class="menu-item-badge">2</small> *@
                <i class="lpx-icon action-icon bi bi-bell-fill" aria-hidden="true"></i>
            </span>
        </a>
    </li>
</ul>
<div class="lpx-context-menu" data-lpx-context-menu="notification-context-menu">
    <ul class="lpx-nav-menu-notification">
		<li class="outer-menu-item">
			<a class="lpx-menu-item-link lpx-menu-item">
				<span class="lpx-menu-item-icon">
                    <i class="lpx-icon outer-icon bi bi-bell-fill" aria-hidden="true"></i>
				</span>
				<span class="lpx-menu-item-text">Notifications
				    @* <span class="lpx-badge">2 NEW</span> *@
                </span>
                <span data-lpx-close="settings-context-menu">
					<i class="lpx-icon bi bi-x outer-icon dd-icon" aria-hidden="true"></i>
				</span>
			</a>
		</li>
    </ul>
    <div class="lpx-button-container">
        <button class="lpx-button">See All Notifications</button>
    </div>
</div>

LeptonX Demo Example:

Check the docs before asking a question: https://docs.abp.io/en/commercial/latest/ Check the samples, to see the basic tasks: https://docs.abp.io/en/commercial/latest/samples/index The exact solution to your question may have been answered before, please use the search on the homepage.

If you're creating a bug/problem report, please include followings:

• ABP Framework version: v5.3.3 / v6.0.0-rc.2
• UI type: Blazor
• DB provider: EF Core
• Tiered (MVC) or Identity Server Separated (Angular): yes
• Exception message and stack trace:
• Steps to reproduce the issue:"

Hi

We are currently evaluating ABP Commercial with the intention to purchase the Business license at the end of the trial if all goes well (really positive about it so far - it will save me a lot of time as the only developper in my organisation). We have some questions regarding whether ABP will be able to support requirements we have for the application we are building. Hoping you can provide some guidance on these.

1. We are looking at utilising multi-tenant with a single database, as each of our customers data will be separate from other customers. We want to remove the Tenant text box on the login screen, and have the framework determine the tenant from the login. We don't want to use sub-domains. We have looked at creating a custom tenant resolver to check a list of email domains to match a tenant (e.g. https://support.abp.io/QA/Questions/447/LoginAPI-Trying-to-log-in-from-an-app-using-the-API---need-to-know-how-to-identify-the-tenant-that-the-user-belongs-to). However we would much prefer to check the whole database for a login and match the tenant that way. I saw this in the Community posts, which sets up a custom login class which loops through the tenants: https://community.abp.io/posts/hide-the-tenant-switch-of-the-login-page-4foaup7p. Would this second method be a recommended approach? Do you have any other thoughts about the best way to achieve this requirement in ABP?
2. We will have some users in Azure B2C. We will implement a separate login for these, assuming OpenIddict has the ability to add an external provider as Identity Server does. Is this sort of setup supported in ABP? Could this setup help with question 1 (we could possibly return a tenant string as a claim from B2C)?
3. We need to have a super user(s) in the Host environment who can manage users within tenants, and view data in different tenants. These would be support/administration roles in our company. We don't want them to have to log in to each tenant as that tenant's admin user to support those tenants, which is how it looks like it works out-of-the-box (note the tenants will still, for the most part, be managing their own users). It seems this would be quite a common requirement (it would unfortunately be a dealbreaker for us not to be able to implement it), and I have seen some other multi-tenant systems work this way (e.g. https://github.com/JonPSmith/AuthPermissions.AspNetCore). So I wanted to find out what a recommended approach might be?
4. With the move to OpenIddict coming, would it be a good idea for us to start building with the next release candidate so we start off with this?
5. Finally, we will have some roles that will be global across tenants (tenants will not be able to create their own roles). Would the best way to implement this be to create a copy of a new role when created in Host for each tenant? And then automatically create roles when a new tenant is created (as Admin is handled)?

Thanks! Matt