Skip to main content

SKYUI

The workflow of an app in DynaMaker is driven mainly by its user interface (UI), which consists of:

Remember that these elements are exclusive to the UI, therefore they can only be added there in onInit(), a function that is already in the default template and initializes the UI. You will find also that the tabs are added to the UI through Studio.setTabs(tabs).

The following app uses a variety of tabs with multiple buttons, a flyout and a configurator:


Tab

A tab determines the steps in which the app is divided into. Typically a configuration starts with the main features, then details and finally some sort of export or quote step. These steps or tabs are SKYUI.Tab and can be created with the arguments:

  • title as a string shown in the UI.
  • icon to show above the title (read more about them here).
  • disabled to make it disabled (e.g. to show the potentially final UI), `false by default
  • designStep meant for assist you when reading the design step in other places of the code (e.g. in SELECTION).
  • onInit as a function that is triggered when switching tabs.
const configureTab = new SKYUI.Tab({
title: 'Configure',
icon: 'cog',
onInit: () => {
const assemblyComponent = ACTIONS.getAssemblyComponent()
const configurator = ASSEMBLY.generateConfigurator(assemblyComponent)

configurator.addCompletionCallback((valid, values) => {
if (valid) {
Studio.requestGeometryUpdate()
}
})

const tabContent = [configurator] // could be also [configurator1, button1, button2, configurator2]
Studio.setTabContent(tabContent)

Studio.requestGeometryUpdate().then(() => {
Studio.setCameraToFitBounds()
})
},
})

Button

With a button an action is typically triggered. A button requires a title and a function as input, together with some extra optional arguments:

  • activeOnClick as a boolean says whether the button remains green (as if it's pressed) or not after it's pressed
  • bootstrapType meant to define the bootstrap type in case of having a custom visualization (changed later inSTYLE)
  • disabled to disable the button.
  • disabledTooltip to show a tooltip as a string when disabled: true and hovering the mouse over it.
  • enabledForSelections as a list of elements (e.g. components, instances, etc) that when they are selected (through Studio.select(myComponent)) the button becomes enabled (typically found in delete-selected-components-type buttons)
  • icon to show to the left of the title (read more about them here).
  • marginTop as a number to set the margin or space above the button.
  • startAsActive as a boolean to make the the button green (as if it's pressed) when switching to the tab where it's located. Useful when the buttons changes a state, typically found in select-type buttons and the tab starts with that state.
  • tooltip to show a tooltip as a string when disabled: false and hovering the mouse over it.
  • visible as a boolean to make the button visible or not (similarly as hiding parameters in a configurator)

Some of the most common examples:

const selectButton = new SKYUI.Button('Select', () => {
ACTIONS.enableSelection()
}, {
activeOnClick: true,
icon: 'hand-up',
marginTop: 20,
})
const addButton = new SKYUI.Button('Add section', () => {
ACTIONS.addSection()
Studio.requestGeometryUpdate().then(()=>{
ACTIONS.updateVisibleMetrics()
})
}, { icon: 'plus' })
const downloadPdfButton = new SKYUI.Button('Download PDF', async () => {
try {
const pdfData = await ACTIONS.generateMainComponentPdf()
Studio.downloadFile('main-component.pdf', pdfData)
} catch (error) {
console.error(error)
Studio.displayDangerMessage('', `Could not generate PDF: ${error.message}`)
}
})

Flyout

A flyout is a button with multiple options (shown in a grid with rows and columns), similar to a dropdown parameter in a configurator. It requires a title and the following optional arguments:

  • activeOnClick as a boolean says whether the flyout remains green (as if it's pressed) or not after it's pressed
  • defaultIndex as a number to determine which option (starting at 0) will be shown by default
  • disabled to disable the flyout.
  • maxColumns of the grid where the options are shown
  • maxRows of the grid where the options are shown
  • startAsActive as a boolean to make the the button green (as if it's pressed) with the same concept as it is with the button
  • visible as a boolean to make the flyout visible or not

Once the flyout is created, you need to add options (or items) through myFlyout.addItem(), which requires a title, a picture and a function as input, including these optional arguments regarding the item:

  • disabled to disable the item.
  • disabledTooltip to show a tooltip as a string when disabled: true and hovering the mouse over it.
  • tooltip to show a tooltip as a string when disabled: false and hovering the mouse over it.

An example of flyout that is used in the app at the beginning:

const flyout = new SKYUI.Flyout('Add module', { activeOnClick: true, maxColumns: 3 })

flyout.addItem('Module A', ASSETS.URLS.THUMBNAIL_MODULE_A_PNG, () => {
const newModuleComponentToAdd = new MODULE.Component()
newModuleComponentToAdd.setProperties({ moduleType: MODULE.MODULE_TYPE.A })
ACTIONS.showConfigurator(newModuleComponentToAdd)
})

flyout.addItem('Module B', ASSETS.URLS.THUMBNAIL_MODULE_B_PNG, () => {
const newModuleComponentToAdd = new MODULE.Component()
newModuleComponentToAdd.setProperties({ moduleType: MODULE.MODULE_TYPE.B })
ACTIONS.showConfigurator(newModuleComponentToAdd)
})

flyout.addItem('Module C', ASSETS.URLS.THUMBNAIL_MODULE_C_PNG, () => {
const newModuleComponentToAdd = new MODULE.Component()
newModuleComponentToAdd.setProperties({ moduleType: MODULE.MODULE_TYPE.C })
ACTIONS.showConfigurator(newModuleComponentToAdd)
})