Using the Toolbar Actions

After you designed the application, test it in your local environment.

Unite UX Studio enables you to make changes, debug, and fix issues, and to prepare a build to deploy the web project. You can access the available actions from the toolbar that is available in each view.

Toolbar

The toolbar provides the following actions:

  • Home—Navigates to the dashboard view.
  • App & Data—Navigates to the view where you can update the application settings and add new Data Providers.
  • DESIGN— Shows the absolutely positioned canvas elements exported from design tool. You can find more information in the cutting view template article
  • RESPONSIVE— Shows the responsive canvas. You can find more information in the cutting view template article
  • CODE— Shows the generated files for the selected view. You can find more information in the cutting view template article

    • Code tab is only visible when the user navigates to edit the view
    • When users generate application depending on the selection of either DESIGN or RESPONSIVE tab absolute position or responsive view will be respectively generated.
  • Export to design—Opens an Electron window with a preview of the selected view. The user can capture the look of the view and export it to Unite UX Sketch.

  • Generate—Generates the latest source code and outputs it in the project location in your file system. To view the related generated code, navigate to the Code tab.
  • Preview in Browser—Triggers the generation of the application, starts the Webpack dev server on http://localhost:port, and opens your default web browser either in the root of the application or in a URL which corresponds to the selected view.

    • The available port is a TCP port with a range between 4200 and 4300.
    • The Webpack dev server is in watch mode. This means that each Generate command causes the reloading of the browser.

    Debugging Applications with the Unite UX Studio

  • Stop— When the dev server is started the Preview in browser button is transformed to Stop button. The Stop button shuts down the Webpack dev server. Stop becomes visible only after the dev server is started.

  • Give Feedback—Opens an external Public Feedback Portal where clients can provide their feedback on the product.

  • User info—Opens the signed in user panel.
In this article
Not finding the help you need?