LibreOffice Conference 2026: Designing a Tileable Dynamic UI for LibreOffice

[music] >> One. Go. >> Okay, good morning everybody. Welcome to this session of designing a tile-able dynamic UI for LibreOffice. First, let me introduce myself. My name is Rifan Elep Utama. I'm a second semester student of University of Budi Luhur and I'm from Indonesia. So, what what this session will talk about? This is This is This session will talk about how to add a how I add a system to LibreOffice to to allow customization on the tab option. Okay, let's go. So, let's First, let me ask you a question. Which team are you? Do you use standard toolbar on LibreOffice? Please raise your hand. Oh, two three people. Okay, next the two Do you Do anyone use the tab? Oh, okay. I see some. And Do anyone else use the other five options? Oh, okay. I think I see none. Okay, good to know for the you that use the tab, I have something very special for this occasion. Maybe sometimes if you see the tab option, you can see the some empty space on the tabs. And sometimes even I I wish I can just like add more buttons that I actually need or maybe remove or remove some that I doesn't need inside. For example, like the save button. I can just use like the control save instead of pressing the button. So, I I wish I can just remove that and replace it with something useful. So, I present to you tileable dynamic UI. So, what what is this? This system allow to allow the type option to move on the button however we want. So, for example like like I said, if you want to customize it to make it easier for newbies or make it more denser and more efficient for your own use, you can use this system. But first, let's let's dive into how LibreOffice handle UI. There are four steps on how LibreOffice handles it its UI. So, first, there's a VCL builder or visual class library. This is the main program that abstract the UI to all operating system. So, LibreOffice is able to be rendered in any operating system. This is the most important program because it's it's also used the .ui files that that determines on how the UI is assembled UI is rendered. Okay, so next the Uno framework. This is the back end of the LibreOffice. So, for example like the if we want to like save, there is like with the Uno commands for it. Without this Uno commands, this button will simply do nothing. So, this is also the important part. Next is the C++ state checker. This program function as the as to make sure the if there is like any broken buttons, that that same button will just force us to disappear instead of breaking every other button or even worse causing a crash. And finally the notebook bar engine. This is the the notebook bar engine function tool like a hands all the buttons that you usually see on the tab option. So, it's all the consistent to appear like you see as usual. Okay, so what's good So, let's dig on on the .ui files. I'm taking this from the LibreOffice Writer as LibreOffice Writer on the insert menu. Here, we can see here. There's like some information that we have to know before I'm making the system. So, so but for so far, this is the object class this this one determines what what the what this actually is. For example, the GTK GTK menu is for the menu like insert, home, and etc. And the ID that actually determines which one it's actually is. Because here is menu insert, it's going to appear as the insert menu with its respective content. Yes. So, let's then we can see here the like property visible tool that make it visible. >> [clears throat] >> Okay, next. Moving down the list, there is like the next one object class GTK menu item. This is this this could be actually filed as the button we all we all know. And the ID is menu insert title page dialog. Now, this one is for the title page dialog button. If you open the LibreOffice Writer and go to inside, you can see this one. This it it is also visible, but can focus is set to false. So, and there's extra thing because because there is like back end action on the title page dialog, there is this Uno commands. So, Uno title page dialog. So, if we click the button, it will call this program to do whatever the title page dialog. And or any other buttons supposed to do. Okay, next this this is also the same the button also down the list. This is page number wizard. After you can see the This is quite similar to the previous one. But, there is like some difference. Compared to the previous one, this one actually does not appear on the inside menu. Even if the visible is true. You may ask why? Because there is like C++ type checker of a high. We we will discuss about it that later. And also of course the page number wizard the Uno commands, we can see right here. >> [clears throat] >> Okay, and finally the last and the simple one is the GTK separator menu item with the ID separator four. What is this? So, this is like this thin line that separates between like specific group of button from another. So, this is only purely cosmetic to help you see the grouping better. So, there's not not much to not not much to say here. Of course with the visible true and can focus false as well. So, what's what's new here? We're going to add the UI customizer. So, what is UI customizer? It is uh some sort of specialized XML writer this designed to edit the notebookbar.ui. What is that? It is like It is almost the same as the notebookbar.ui file that is used for the notebook notebookbar, but it it is reserved for this UI customizer. Because it's it works by rewriting the notebookbar the ui.ui files. So, if they if this this program got malfunctions, all these previous system will still function as it it should without much interference. Okay, we can see here. First, the UI customizer. We can call this to customize the notebook notebookbar. Then, the UI customizer also use also need list of every button information on that specific application. For example, if if it it is LibreOffice Writer, it need to have like everything like the open open or hold something like holding how wide, how tall it is, the UNO commands, the the types, the type which it is it a button or a menu. And of course, the ID as well. Then, after After this read After the the program read from the list, and you call it for editing the notebookbar.ui, it is it the UI customizer will write a new one and replace the old one. Then it is processed as processed and rendered as usual with the with the actual LibreOffice systems. Okay, next implementing the feature. So, how do we customize the UI? So, first input the UI code and use or use the edit menu. Let's find it. I I think you you haven't in haven't explained how do how why there is the UI code. So, the the benefit of using dot save big list for every button is we can up its own UI ID. So, we can just use what to copy UI from each other instead of having to recreate it again one by one manually. Or you can use the edit menu that we will see on the next. Then after we edit after we input the UI code export the UI code or using the edit menu the UI customizer will create a new notebook bar UI dot UI file and replace the old one. After that, you can just restart LibreOffice and you and the appearance will will be new on the restart. >> [clears throat and snorts] >> Okay, as we can see here like the simulation of the type the UI option you can access it just like the the any others. See, you can you can mm ex- export the UI code here to just copy for copy from other people or maybe we can just create a additional one. For example like newbie friendly fashion, the tightly packed one or any others. Or we can just open the UI editor and start editing it ourselves. Okay, next this is the like the concept for the the viable UI