As of this commit: DEV: Mark `bootbox` as deprecated (#18795) committed 06:08PM - 31 Oct 22 UTC (UTC) [image] pmusaraj +32 -0 the bootbox library for dialogs is now deprecated. Developers, please use the dialog service in core instead of bootbox in your custom themes and plugins. The bootbox library will be removed from core Discourse entirely sometime in 2023. Here are some example PRs from plugins and themes that show how to transition to the dialog service: DEV: Refactor bootbox alerts by pmusaraj · Pull Request #188 · discourse/discourse-reactions · GitHub DEV: Refactor bootbox dialogs by pmusaraj · Pull Request #137 · discourse/discourse-subscriptions · GitHub DEV: Replace bootbox alert dialog by jancernik · Pull Request #30 · discourse/discourse-gifs · GitHub

In my custom theme I have something like this: bootbox.alert('alert text'); How can I access the dialog service in the theme, since it seems to not be globally available?

The easiest option would be to load the service using the lookup. Here’s an example code (this is untested, but we use something like this in core, outside of Ember components/controllers/routes): import { getOwner } from "discourse-common/lib/get-owner"; const dialog = getOwner(this).lookup("service:dialog"); dialog.alert('alert text');

[image] Penar Musaraj: import { getOwner } from "discourse-common/lib/get-owner"; const dialog = getOwner(this).lookup("service:dialog"); dialog.alert('alert text'); Thanks. I tried this but am getting an error: SyntaxError: /discourse/theme-11/initializers/theme-field-36-common-html-script-2: 'import' and 'export' may only appear at the top level. (13:4)

Ah, right, we need to use requires in these script tags. If it’s ok to share, what’s the full code of what you are doing here? I’d like to propose an alternative to this tag, we’ve moved most theme code to standalone JS files in the theme components that we maintain ourselves and it might be easier to do a more general refactor here for you.

Thanks for the offer! Here is the full script (with some text slightly modified), which was working fine until we noticed the Bootbox popup no longer rendered HTML tags correctly. if (typeof bootbox === 'undefined') { console.log('Cannot trigger undefined "bootbox"'); return; } let currentUser = api.getCurrentUser(); if (currentUser) { api.container.lookup('store:main').find('user', currentUser.username).then((user) => { let userGroups = user.groups.map(group => group.name); let bodyClasses = userGroups.map(group => `user-group--${group}`); document.querySelector('body').classList.add(...bodyClasses) let showPopup; switch(true) { case userGroups.includes('restricted_member'): showPopup = true; break; case userGroups.includes('users_all'): case userGroups.includes('officers'): showPopup = false; break; default: showPopup = true; break; } if (!showPopup) { return; } let alertHeading = ' Oh no! '; let alertBody = ' Your account is currently restricted and you no longer have access to valuable resources. Click here for more information. '; bootbox.alert(alertHeading + alertBody); }); }

Hi Tim, Here’s the alternative, note that the contents here needs to go in an initializer JS file in a component. You can see a simple example of a full component structure here. import { withPluginApi } from "discourse/lib/plugin-api"; import { getOwner } from "discourse-common/lib/get-owner"; import { schedule } from "@ember/runloop"; import { htmlSafe } from "@ember/template"; export default { name: "tester-initializer", initialize() { withPluginApi("0.8", (api) => { const currentUser = api.getCurrentUser(); if (currentUser) { const userGroups = currentUser.groups.map((group) => group.name); let showPopup = false; switch (true) { case userGroups.includes("admins"): showPopup = true; break; } if (!showPopup) { return; } const alertHeading = "Oh no!"; const alertBody = 'Your account is currently restricted and you no longer have access to valuable resources. Click here for more information.'; schedule("afterRender", () => { // delay needed so that the dialog service is loaded const dialog = getOwner(this).lookup("service:dialog"); dialog.alert({ message: htmlSafe(alertBody), title: alertHeading, }); }); } }); }, }; Hope this helps.

This is perfect. Thanks so much!

Bootbox is now deprecated

Development

kelv (Kelvin T) June 12, 2024, 7:56am 9

The bootbox deprecation is fully resolved as of this PR: DEV: remove bootbox dependency by tyb-talks · Pull Request #27443 · discourse/discourse · GitHub. As per the OP, please use the dialog service instead.

Topic		Replies	Views
[PAID] Convert plugin from deprecated bootbox to core dialog service Marketplace delivered	1	638	December 15, 2023
Is there any way to listen User login event using Theme component Development	15	2166	December 30, 2020
Dialog modal HTML support UX	11	1045	February 17, 2023
Using Ember Services in Discourse plugins Development	7	2270	February 6, 2022
Modernizing inline script tags for templates & JS API Development dev-news	46	6293	March 25, 2026

Bootbox is now deprecated

Related topics