Building Studio Widgets
Building Studio Widgets
Roblox Studio gives you the power to create custom widgets and use them as Studio tools and extensions. These widgets behave as custom windows/panels in Studio and they can be docked inside your interface or floated as separate windows.
Creating a Widget GUI
All Studio widgets begin as
DockWidgetPluginGui objects which can be filled with text labels, buttons, and more. To create an empty widget GUI, call the
Plugin/CreateDockWidgetPluginGui|CreateDockWidgetPluginGui() function, passing in an ID and a
DataType/DockWidgetPluginGuiInfo|DockWidgetPluginGuiInfo object. After it’s created, you can optionally assign a title to the widget by setting its
DataType/DockWidgetPluginGuiInfo|DockWidgetPluginGuiInfo object, the acceptable properties are as follows, and
Plugin/CreateDockWidgetPluginGui|CreateDockWidgetPluginGui() expects them in this specific order:
|InitialDockState||enum||One of the
|InitialEnabled||boolean||The initial enabled (visible) state of the widget GUI.|
|InitialEnabledShouldOverrideRestore||boolean||If true, the value of InitialEnabled will override the previously saved enabled state.|
|FloatingXSize||integer||The initial width of the GUI when InitialDockState is set to
|FloatingYSize||integer||The initial height of the GUI when InitialDockState is set to
|MinWidth||integer||The minimum width of the GUI, with some platform-specific variations.|
|MinHeight||integer||The minimum height of the GUI, with some platform-specific variations.|
Plugin/CreateDockWidgetPluginGui|CreateDockWidgetPluginGui()function cannot be used in game scripts. It can only be called from the command bar or a
Articles/Intro to Plugins|pluginscript.
Customizing the GUI
Once created, a widget GUI can be customized with GUI objects like informative
ImageButton|ImageButtons, and more. For example, this code adds a basic
TextButton to the GUI window:
User Input in Widgets
UI elements such as
TextButton work as normal in Studio widgets and you can build interfaces just like you normally would on Roblox. However,
ContextActionService will not work since these services expect the main game window to be in focus.
One workaround for generic input events is to create a transparent
Frame and overlay it over the entire screen. When the user clicks on the frame, keyboard input will be captured in the
GuiObject/InputBegan event on the frame until the user clicks away. Below is a sample code snippet that creates such a frame:
Working With Studio Color Themes
Effective Studio widgets should ideally match the Studio theme setting and dynamically adjust if the theme is changed. For instance, if a developer is using “Dark” theme, the widget’s background color, images, and text labels should look nice alongside Studio’s native theme colors.
The following addition uses a
syncGuiColors() function which is initially called along with a table of GUI objects to sync. Inside the function, a nested
setColors() function loops through the objects and syncs specific aspects of them using
enum/StudioStyleGuideColor|StudioStyleGuideColor enums. On line 36, this
setColors() function is immediately run to sync the Studio theme, then it’s connected to the
Studio/ThemeChanged|ThemeChanged event to detect future theme changes.