Add Tabs within a block

alcompstudio · December 21, 2025, 4:41pm

Hello, dear developers!

I would like to suggest adding the ability to add tabs within a block (additional data separation). Currently, this feature is implemented within an entire page (i.e., only a page can be “split” into separate sections of information placed in tabs). However, I think it would be appropriate to place tabs inside a block so that, for example, you can see detailed information about the current record, and when you switch between tabs with related data blocks, this detailed information remains visible. For example, on a separate Order page within the Details block, you can place tabs for Goods in Order and Finance, where you can add related blocks of the Products and Invoices collections, respectively.

Of course, you can now display related data as sub-details or sub-tables, but using tabs will save space and preserve the visual aesthetics of related data if there is a lot of information. In addition, tabs can be added not only to display related collections, but also to separate information from the current record if there are a lot of data fields and they need to be structured effectively on one page. The “Group” Divider does not always help to effectively separate one group of data fields from others (as I mentioned above, if there are many fields, it will not look aesthetically pleasing and the user will be confused by the abundance of data fields on one page). So, tabs will help to hide information from the user at some point, but they can click on the tab inside the block at any time and display (go to) the desired data block.

hongboji · December 22, 2025, 7:04am

Thanks for your feedback.
This feature is not currently supported. I have documented this requirement and will evaluate it in the future.

mathyvds · December 29, 2025, 8:55am

Hi
Look at this custom plugin someone made:

alcompstudio · December 29, 2025, 10:39am

Thank you for your reply. The installation instructions for this plugin say that you need to do this via the command line (console) and then deploy/build it (if I understand correctly).

I will try to install this plugin, but I am not sure I can do it via the console… Unfortunately, I am not an expert in coding and do not have the skills to work in the console. I could not find any information about this plugin. Can it be downloaded via the web interface for installation?

Or is there another way to easily install the plugin for a non-programmer?

alcompstudio · December 30, 2025, 8:51pm

I tried to compile and install the ready-made plugin myself. I used hints from an external AI agent. First, I tried to build it on the installed version NocoBase on my server (installation - using EasyPanel, via Docker images), but nothing worked, I kept getting an error in the console

root@8e9c6325f86e:/app/nocobase# yarn build @nocobase/plugin-block-tabs --no-dts
yarn run v1.22.22
$ nocobase build @nocobase/plugin-block-tabs --no-dts
Please install all dependencies
$ yarn install
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
root@8e9c6325f86e:/app/nocobase#

Something similar was mentioned in the thread Plugin dependencies check failed on official example, but no solution was found.

As I understand it, the image installs a “production” version of the platform on the server, and it is not possible to build anything on it.

For the build, I installed the “dev version” of Nocobase from GitHub on my local PC specifically to build plugins there.
I downloaded the plugin from GitHub, installed all the dependencies, ran the “yarn build”, and everything went well (see the console output below).

PS E:\Business\Projects\nocobase-2\nocobase&gt; yarn build @nocobase/plugin-block-tabs --no-dts
yarn run v1.22.19
$ nocobase build @nocobase/plugin-block-tabs --no-dts
$ tsup
@nocobase/plugin-block-tabs: plugins/@nocobase/plugin-block-tabs build start
@nocobase/plugin-block-tabs: build plugin client
asset index.js 17.8 KiB [emitted] (name: main)
orphan modules 34 KiB [orphan] 9 modules
runtime modules 971 bytes 4 modules
cacheable modules 35.8 KiB
  modules by path external "@formily/ 84 bytes
    external "@formily/react" 42 bytes [built] [code generated]
    external "@formily/shared" 42 bytes [built] [code generated]
  ./src/client/index.tsx + 8 modules 34 KiB [code generated]
  external "@nocobase/client" 42 bytes [built] [code generated]
  external "@emotion/css" 42 bytes [built] [code generated]
  external "antd" 42 bytes [built] [code generated]
  ../../../../node_modules/classnames/index.js 1.49 KiB [built] [code generated]
  external "react" 42 bytes [built] [code generated]
  external "react-i18next" 42 bytes [built] [code generated]
Rspack 1.3.2 compiled successfully in 3.81 s
@nocobase/plugin-block-tabs: build plugin server source
@nocobase/plugin-block-tabs: delete server files
@nocobase/plugin-block-tabs: build plugin server dependencies
@nocobase/plugin-block-tabs: These packages @nocobase/server will be exclude. For more information, please refer to: https://docs.nocobase.com/development/others/deps.
@nocobase/plugin-block-tabs: write external version
Done in 39.28s.
PS E:\Business\Projects\nocobase-2\nocobase&gt;

Then packed the assembled plugin into an archive

PS E:\Business\Projects\nocobase-2\nocobase\packages\plugins\@nocobase\plugin-block-tabs&gt; yarn pack
yarn pack v1.22.19
success Wrote tarball to "E:\\Business\\Projects\\nocobase-2\\nocobase\\packages\\plugins\\@nocobase\\plugin-block-tabs\\nocobase-plugin-block-tabs-v1.0.0.tgz".
Done in 0.15s.
PS E:\Business\Projects\nocobase-2\nocobase\packages\plugins\@nocobase\plugin-block-tabs&gt;

I uploaded the finished archive via the plugin manager UI. But it showed a similar error during installation…

What could be wrong, and is there a solution? Maybe I’m doing something wrong?

mathyvds · December 31, 2025, 10:53am

Hi
Did you use this command, as described in the install instructions?

cd /path/to/your/nocobase
yarn install --legacy-peer-deps

alcompstudio · December 31, 2025, 12:32pm

Yes, I did everything. But I did everything on a local PC. That is, I build the plugin itself on a local PC and then created an archive. Everything worked out, there were no errors either when installing dependencies “yarn install --legacy-peer-deps” or when compiling the plugin itself “yarn build @nocobase/plugin-block-tabs --no-dts.”

Then I tried to upload the finished archive to a separate version of Nocobase, which is located on a remote server (not on my local PC). But when uploading it to the Plugin Manager, it is already clear that this plugin has an error. And I didn’t even activate it.

I can’t build the plugin on the remote server because it has a “stripped-down” version of the Nocobase platform, which is installed from the production Docker image. It lacks the functionality for building. Therefore, I performed the build separately on a completely different version of Nocobase (but it is also 2.0).

Unfortunately, I’m not a programmer, I don’t know how to code, so the AI guided me through all the steps. Perhaps I overlooked something when trying to build and/or upload the finished plugin. I don’t even know where to look to find the error…