Hello, this is Motohashi from Kintone Lab , a business improvement lab for kintone managers.
"kintone®︎" provided by Cybozu Inc. is a platform that allows you to customize and use the tools you need for your work, such as sharing information within a team and managing huge amounts of data. Kintone's official partner, Kintan Lab, helps customers create original tools that are easy to use by developing and adding not only standard functions but also function extensions (plugins).
In the latter half of last year, Kintan Lab created a number of kintone plugins. As a result, there were some ideas that were rejected, so I would like to pay tribute to them here.
This time, I would like to introduce a solution for when you are creating a plugin or customization for kintone and are having trouble finding a place to put icons. This is an implementation that stacks the function call icons arranged in the "blank elements to the right of the record list menu" that are constantly increasing as plugins are added, on the bootstrap offcanvas.
Menu icons are hidden
When we create a plug-in at the request of a customer, we often get requests such as "Please place an icon near the menu so that the icon can be called from there." However, as we add more and more icons, they can get lost or the menu icon can get hidden in the list.
Customer: "The icons are getting hidden. Is there anything I can do about it?"
Motohashi: "Should we hide it from the beginning?"
I said this jokingly, and it was well received, so I made it, and it is the subject of this memorial (which was not accepted).
Officially, this space is called "the blank elements to the right of the record list menu", but here we will refer to it as "header menu space" in accordance with the API (later in the article, we will also go into more detail about the HTML button style that is tailored to kintone).
To place an icon near the menu, when using JS customization or a plugin, you will probably call kintone.app.getHeaderMenuSpaceElement() to obtain the header menu space and then place the menu and icons there.
const headerSpace = kintone.app.getHeaderMenuSpaceElement()
Placement of the call button
The header menu space is useful as a place to store icons when expanding kintone's functions, so if you take advantage of this opportunity to add more icons, you may find that it's overflowing before you know it.
Let's try overflowing it for now. I placed 50 icons.
If this happens, menu icons added later may go missing, and if you try to avoid this by using prepend, the icons of other plugins may end up being hidden.
I'm going to add more, so I'm going to overflow with 200 icons, four times the number.
It went past the header of the list and spilled out from the bottom. Wow, right?
There are probably few cases where 200 icons would cause a mess, but it is common for menu icons to get hidden in the list.
It looks like a drawer. It uses the offcanvas function of bootstrap.
When I proposed the idea, Dynamic Island for the iPhone 14 was all the rage, so I wanted to call it "Dyna Island," but I felt embarrassed, so I went straight for Menu Canvas.
It was rejected because it felt like a lame joke, but I don't think it's that bad in terms of practicality, so I'd like to offer it up here.
Next, we will show you how to apply Menu Canvas.
Steps to apply Menu Canvas to your project
To apply the menu canvas,
There are three steps: 1. Add menu_canvas.ts to the project. 2. Create a new one in the main logic. 3. Append an HTMLElement.
First, add this menu_canvas.ts to your TypeScript project.
Next, create a new one from the main logic, passing in the argument ID.
const menu_canvas_id = 'sample_menu_canvas' const plugin_canvas = new MenuCanvas(menu_canvas_id)
Even if you use them from different plugins, as long as the ID is the same, you can share the icons on the same canvas. (That's what I made it for.)
Finally, append the HTMLElement in the same way as you did with the header menu space.
const node_item = new HTMLElement() plugin_canvas.append(node_item)
If the speech bubble icon appears in the header menu space, the change has been applied.
Click the speech bubble icon to check the operation
When you click on the added speech bubble icon, the menu canvas will appear smoothly.
If it doesn't work, bootstrap may not be working, so please check the sample code . I often had trouble with style.scss.
Side stories and essentials you should try
As an aside, the sample code I posted on github randomly generates and adds FontAwesome icons.
// Add 100 icons to the menu canvas. const generator = new ItemGenerator() for (let i = 0; i < CONSTANTS.REPEAT; i++) { plugin_canvas.append(generator.get()) }FontAwesome is a great companion for customizing kintone.
As an aside, when arranging icons in the header menu space of kintone, you can apply the following style to make them look similar to the standard filter icons and graph icons.
const icon = document.createElement('button');
icon.style.width = '48px'
icon.style.height = '48px'
icon.style.backgroundColor = '#f7f9fa'
icon.style.fontSize = '28px'
icon.style.border = '1px solid #e3e7e8'
icon.style.display = 'inline'The FontAwesome icons look great.
This is more of a point than a digression, but in many cases, if you specify height = 'auto' in the HeaderMenuSpace style, the height will automatically expand and you will be able to display a small number of icons without any problems.
kintone.app.getHeaderMenuSpaceElement().style.height = 'auto'
You can temporarily expand it by opening the developer tools in your browser and entering this line in the console.
This is easier as it only requires adding one line to the script.
If you are having trouble, don't use offcanvas, just set the height of HeaderMenuSpace to auto.
Public Code
The features introduced here have been applied to simple JS customization and published on github. Please take a look at this as well.
MOTOHASHI Daisuke