Progress will discontinue Telerik Platform on May 10th, 2018. Learn more

Run and Configure the UI Designer

Filter by IDE
Select the Progress AppBuilder client you are currently using for development.

IDE

The Kendo UI Designer is an experimental module with limited functionality. You can develop user interfaces only for hybrid applications that are initialized as Kendo UI applications.

For easier user interface development, you can run the Kendo UI Designer to drag and drop user interface elements and configure their properties. The Kendo UI Designer complements the code editor.

Prerequisites

  • Verify that your preferred AppBuilder client is running and you are logged in.
  • Verify that you have opened the code for your app in AppBuilder.
  • Verify that your app meets the requirements of the Kendo UI Designer.

Procedure

In-Browser

  1. Select RunKendo UI Designer.
    The Kendo UI Designer loads any remote views.
  2. (Optional) Change the device type.
    • To preview your UI design for tablets, click Tablet.
    • To preview your UI design for phones, click Phone.
  3. (Optional) Change the device orientation.
    • To preview your UI design in landscape mode, click Landscape.
    • To preview your UI design in portrait mode, click Portrait.
  4. (Optional) Change the device platform.
    • To preview your UI design for iOS devices, from the drop-down menu, select iOS.
    • To preview your UI design for Android devices, from the drop-down menu, select Android.
    • To preview your UI design for Windows Phone devices, from the drop-down menu, select Windows Phone.
  5. (Optional) If iOS is the current device platform, from the drop-down menu, change the device platform version.
    This feature is available only when iOS is the current device platform.

Universal

  1. In the Project Navigator, double-click index.html to open it.
  2. Click Designer at the bottom of the code editor, to run the Kendo UI Designer.
    The Kendo UI Designer loads any remote views.
  3. (Optional) Click Split to show the code editor and the Kendo UI Designer simultaneously.
    • Click Vertical or Horizontal to split the screen vertically or horizontally.
    • Click Flip to switch the positions of the code editor and the Kendo UI Designer.
    • Drag the splitter bar to resize the code editor and the designer panes.
  4. (Optional) Change the device type.
    • To preview your UI design for tablets, click Tablet.
    • To preview your UI design for phones, click Phone.
  5. (Optional) Change the device orientation.
    • To preview your UI design in landscape mode, click Landscape.
    • To preview your UI design in portrait mode, click Portrait.
  6. (Optional) Change the device platform.
    • To preview your UI design for iOS devices, from the drop-down menu, select iOS.
    • To preview your UI design for Android devices, from the drop-down menu, select Android.
    • To preview your UI design for Windows Phone devices, from the drop-down menu, select Windows Phone.
  7. (Optional) If iOS is the current device platform, from the drop-down menu, change the device platform version.
    This feature is available only when iOS is the current device platform.

Windows

  1. In the Project Navigator, double-click index.html to open it.
  2. Click Designer at the bottom of the code editor, to run the Kendo UI Designer.
    The Kendo UI Designer loads any remote views.
  3. (Optional) Click Split to show the code editor and the Kendo UI Designer simultaneously.
    • Click Vertical or Horizontal to split the screen vertically or horizontally.
    • Click Flip to switch the positions of the code editor and the Kendo UI Designer.
    • Drag the splitter bar to resize the code editor and the designer panes.
  4. (Optional) Change the device type.
    • To preview your UI design for tablets, click Tablet.
    • To preview your UI design for phones, click Phone.
  5. (Optional) Change the device orientation.
    • To preview your UI design in landscape mode, click Landscape.
    • To preview your UI design in portrait mode, click Portrait.
  6. (Optional) Change the device platform.
    • To preview your UI design for iOS devices, from the drop-down menu, select iOS.
    • To preview your UI design for Android devices, from the drop-down menu, select Android.
    • To preview your UI design for Windows Phone devices, from the drop-down menu, select Windows Phone.
  7. (Optional) If iOS is the current device platform, from the drop-down menu, change the device platform version.
    This feature is available only when iOS is the current device platform.

Visual Studio

This version of the extension for Visual Studio does not provide the Kendo UI Designer.

CLI

This version of the command-line interface does not provide the Kendo UI Designer.

Next Steps

Add and configure user interface elements.

See Also

Start a free trial Request a demo
Contact us: +1-888-365-2779
sales@telerik.com
Copyright © 2016-2017, Progress Software Corporation and/or its subsidiaries or affiliates. All rights reserved.