Skip to main content

SKYUI

When creating a Dynamic Tool, we believe it is a good idea to split the customization process into different steps using tabs. A tab consists of a name and a list of buttons. A button consists of a name and an action.

Example

As an example, two different tabs are created: Product and Export:

  • In Product a configurator with 3 parameters is created through an actionEvent.
  • In Export a button is created, which triggers an actionEvent to download a stl file to 3D print.

The code inside the function generateTabs to create this interface would look like as follows:

function generateTabs(Studio: STUDIO.StudioService) {
const productTab = new STUDIO.Tab('Product', () => {
const configurator = Studio.actionEvent('configure-component')
return [ configurator ]
}, { icon: STUDIO.ICONS.COG })

const exportTab = new STUDIO.Tab('Export', () => {
const downloadStlButton = new SKYUI.Button('Download STL', () => {
const stlString = Studio.actionEvent('generate-stl-string')
Studio.downloadFile('box.stl', stlString)
})
return [ downloadStlButton ]
}, { icon: STUDIO.ICONS.DOWNLOAD })

return [ productTab, exportTab ]
}

Tabs & Buttons

All the tabs and buttons can be found in the code section, under the tab CODE / UI. The function generateTabs returns all the tabs that you can create. Inside these tabs, you can create as many buttons as you want. Each tab and button can be create as follows:

Tab

const myTab = new STUDIO.Tab('My Tab', () => {
/* myActions */
return [/* myButtons & myConfigurators */]
})
new STUDIO.Tab(title: string, toolbarGenerator: () => ToolbarItem[], args: {
callback: () => { },
designStep: number | string,
disabled: boolean,
icon: any,
instantUpdate: boolean,
updateArgs: {
updateModels: boolean // default = true
updateProduct: boolean // default = false
updateSketches: boolean // default = true
updateStaticModels: boolean // default = false
},
updateOnChange: boolean,
})

Button

const myButton = new SKYUI.Button('My Button', () => { /* myActions */ })
new SKYUI.Button(title: string, action: () => { }, args: {
activeOnClick: boolean,
bootstrapType: string,
disabled: boolean,
disabledTooltip: string,
enabledForSelections: any[],
hasBlockingAction: boolean,
icon: any,
id: string,
marginTop: number,
showLoader: boolean,
startAsActive: boolean,
tooltip: string,
visible: boolean
})

getTooltip ()
setTooltip (value: string)
getDisabledTooltip ()
setDisabledTooltip (value: boolean)