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()
    })
  },
})

setTabs​

Use Studio.setTabs() to show and update the tabs in the UI of your app.

The most common uses of this function are:

  • Creating and showing tabs in onInit()
export function onInit() {
  const componentHandler = Studio.getComponentHandler()
  const newComponent = new MYCOMPONENT.Component()
  componentHandler.add(newComponent)

  const tab1 = new SKYUI.Tab({
    title: 'Configure',
    icon: 'cog',
    onInit: () => {
      /*actions*/
    },
  })
  const tab2 = new SKYUI.Tab({
    title: 'Edit',
    icon: 'pencil',
    onInit: () => {
      /*actions*/
    },
  })

  const tabs = [tab1, tab2]
  Studio.setTabs(tabs)
}
  • Updating tabs based on a parameter:
export function onInit() {
  const componentHandler = Studio.getComponentHandler()
  const newComponent = new MYCOMPONENT.Component()
  componentHandler.add(newComponent)
  Studio.requestGeometryUpdate()

  const windowTab = new SKYUI.Tab({
    title: 'Window',
    icon: 'pencil',
    onInit: () => {
      /*actions*/
    },
  })

  const houseTab = new SKYUI.Tab({
    title: 'House',
    icon: 'cog',
    onInit: () => {
      const configurator1 = ACTIONS.getConfigurator1() // e.g. adds/removes window
      configurator1.addCompletionCallback((valid, values) => {
        if (valid) {
          const tabs = values[PARAMETER_ID.HAS_WINDOW] ? [houseTab, windowTab] : [houseTab]
          Studio.setTabs(tabs) // triggered every time the configurator is updated
        }
      })
    },
  })

  const tabs = [houseTab]
  Studio.setTabs(tabs) // triggered once when the app is open for the first time
}

setTabContent​

Use Studio.setTabContent() to show and update the content of a tab (i.e. buttons, configurators, etc) in the UI of your app. These are some of the most common uses of this function:

  • Create and show content:
export function onInit() {
  const componentHandler = Studio.getComponentHandler()
  const newComponent = new MYCOMPONENT.Component()
  componentHandler.add(newComponent)
  Studio.requestGeometryUpdate()

  const tab1 = new SKYUI.Tab({
    title: 'Configure',
    icon: 'cog',
    onInit: () => {
      const configurator1 = ACTIONS.getConfigurator1()

      const button1 = new SKYUI.Button('Button 1', () => {
        /*actions*/
      })

      const tabContent = [configurator1, button1]
      Studio.setTabContent(tabContent)
    },
  })

  const tabs = [tab1]
  Studio.setTabs(tabs)
}
  • Updating tab content based on a parameter:
export function onInit() {
  const componentHandler = Studio.getComponentHandler()
  const newComponent = new MYCOMPONENT.Component()
  componentHandler.add(newComponent)
  Studio.requestGeometryUpdate()

  const tab1 = new SKYUI.Tab({
    title: 'Configure',
    icon: 'cog',
    onInit: () => {
      const button1 = new SKYUI.Button('Button 1', () => {
        /*actions*/
      })

      const button2 = new SKYUI.Button('Button 2', () => {
        /*actions*/
      })

      const configurator1 = ACTIONS.getConfigurator1()
      configurator1.addCompletionCallback((valid, values) => {
        if (valid) {
          const tabContent = values[PARAMETER_ID.HAS_WINDOW]
            ? [configurator1, button1, button2]
            : [configurator1, button1]
          Studio.setTabContent(tabContent) // triggered every time the configurator is updated
        }
      })

      const tabContent = [configurator1, button1]
      Studio.setTabContent(tabContent) // triggered once when the tab is open
    },
  })

  const tabs = [tab1]
  Studio.setTabs(tabs)
}

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 in STYLE)
  • 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 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 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)
})