如何在Frappe Framework/ERPNext中对低权限角色隐藏通用UI元素

在Frappe生态中，针对特定角色屏蔽UI选项的最优方案是通过自定义App注入前端钩子脚本实现，所有修改都在自定义App内完成，不会触碰核心代码，避免版本更新后修改被覆盖。

前提准备 #

• 你需要提前创建好自定义Frappe App，创建命令：bench new-app <你的应用名>
• 将应用安装到对应站点：bench --site <你的站点域名> install-app <你的应用名>

需求实现代码 #

首先在自定义App的public/js目录下新建desk_ui_hide.js文件，写入以下逻辑：

// 页面加载完成后执行
frappe.ready(() => {
    // 1. 隐藏创建Workspace按钮
    // 优先判断角色，示例：非Workspace Manager角色隐藏按钮
    if (!frappe.user.has_role("Workspace Manager")) {
        // 监听路由切换，进入Workspace页面时执行操作
        frappe.router.on('change', () => {
            if (frappe.router.current_route[0] === 'workspace') {
                // 延迟执行确保DOM完全渲染
                setTimeout(() => {
                    // 根据实际按钮文本调整选择器
                    $('button:contains("新建 Workspace")').remove();
                }, 300);
            }
        })
    }

    // 2. 隐藏指定面板中的选项
    // 示例：非系统管理员角色隐藏侧边栏的"用户"选项
    if (!frappe.user.has_role("系统管理员")) {
        setTimeout(() => {
            // 根据你要隐藏的元素调整DOM选择器
            $('.desk-sidebar .sidebar-item:contains("用户")').remove();
            // 要隐藏多个选项可以重复添加对应选择器的移除逻辑
        }, 500);
    }
})

脚本注入方法 #

全局注入（全Desk页面生效） #

打开自定义App的hooks.py文件，添加以下配置：

# 全局注入自定义JS到Desk页面
app_include_js = [
    "/assets/<你的应用名>/js/desk_ui_hide.js"
]

按需注入（仅特定页面生效，性能更优） #

如果你的隐藏逻辑只需要在Workspace页面生效，可以改用page_js钩子，避免多余脚本加载：

# 仅在Workspace页面注入自定义JS
page_js = {
    "workspace": "/assets/<你的应用名>/js/desk_ui_hide.js"
}

配置完成后执行bench build && bench restart即可生效。

注意事项 #

• 优先使用Frappe原生权限系统实现需求：Workspace创建权限本身和Workspace Manager角色绑定，只要不给低权限角色分配该角色，默认就不会显示创建按钮，不需要额外写脚本
• 前端隐藏只是视觉层面的屏蔽，若要彻底禁止用户绕过前端调用对应接口，需要额外添加后端权限校验逻辑，通过重写API或者配置permission_query实现
• DOM选择器尽量使用ID、属性选择器，减少文本选择器的使用，避免多语言切换或版本更新后文本变化导致脚本失效
• Frappe版本升级后需要验证自定义脚本是否正常工作，避免核心前端结构变更导致逻辑失效

内容的提问来源于stack exchange，提问作者Michael de Borst