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

Add and Configure UI Elements

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.

In the Kendo UI Designer, you can drag and drop user Kendo UI Core and Kendo UI Professional interface elements to develop the front end for your application. You can set values for properties and bind events to the interface elements.

You cannot add or configure custom widgets.

When you use the Kendo UI Designer, keep in mind that all Kendo UI Core and Kendo UI Professional limitations apply to it. You might not be able to add all available user interface elements at all times. For example, you cannot add a widget that requires a parent widget before the parent. For more information about Kendo UI Core and Kendo UI Professional, see the following resources.

In the Kendo UI Designer, you cannot rearrange the user interface elements. To rearrange and format user interface elements, you need to modify your code.

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. From the drop-down menu at the top of the Kendo UI Designer, select a mobile platform.
  3. In the Outline Inspector sidebar, select the view in which you want to place the element.
  4. (Optional) Start typing the name of the element that you want to add in the Filter text box.
    The Kendo UI Designer lists elements that match your search as you type.
  5. In the UI Library sidebar, select a widget, container or view.
    You cannot create layouts from the Kendo UI Designer.
  6. (Optional) Review the description of the selected element at the bottom of the UI Library sidebar.
  7. Drag and drop the selected element in the design pane.
    When an element is added successfully, the markup of index.html is updated and the element is added in the Outline Inspector.
  8. In the Outline Inspector sidebar, select the newly added element.
  9. In the Property Inspector sidebar, modify the element properties.
    The Property Inspector shows only properties available for the selected element. The markup of index.html is updated with your changes.
  10. In the Property Inspector sidebar, bind events to the element.
    The Property Inspector shows only events available for the selected element. You can select from all global events. The markup of index.html is updated with your changes.
  11. From the main menu, save your changes.

Universal

  1. Select RunKendo UI Designer.
    The Kendo UI Designer loads any remote views.
  2. From the drop-down menu at the top of the Kendo UI Designer, select a mobile platform.
  3. In the Outline Inspector sidebar, select the view in which you want to place the element.
  4. (Optional) Start typing the name of the element that you want to add in the Filter text box.
    The Kendo UI Designer lists elements that match your search as you type.
  5. In the UI Library sidebar, select a widget, container or view.
    You cannot create layouts from the Kendo UI Designer.
  6. (Optional) Review the description of the selected element at the bottom of the UI Library sidebar.
  7. Drag and drop the selected element in the design pane.
    When an element is added successfully, the markup of index.html is updated and the element is added in the Outline Inspector.
  8. In the Outline Inspector sidebar, select the newly added element.
  9. In the Property Inspector sidebar, modify the element properties.
    The Property Inspector shows only properties available for the selected element. The markup of index.html is updated with your changes.
  10. In the Property Inspector sidebar, bind events to the element.
    The Property Inspector shows only events available for the selected element. You can select from all global events. The markup of index.html is updated with your changes.
  11. From the main menu, save your changes.

Windows

  1. Verify that index.html is open in designer or split view.
  2. From the drop-down menu at the top of the Kendo UI Designer, select a mobile platform.
  3. In the Outline Inspector sidebar, select the view in which you want to place the element.
  4. (Optional) Start typing the name of the element that you want to add in the Filter text box.
    The Kendo UI Designer lists elements that match your search as you type.
  5. In the UI Library sidebar, select a widget, container or view.
    You cannot create layouts from the Kendo UI Designer.
  6. (Optional) Review the description of the selected element at the bottom of the UI Library sidebar.
  7. Drag and drop the selected element in the design pane.
    When an element is added successfully, the markup of index.html is updated and the element is added in the Outline Inspector.
  8. In the Outline Inspector sidebar, select the newly added element.
  9. In the Property Inspector sidebar, modify the element properties.
    The Property Inspector shows only properties available for the selected element. The markup of index.html is updated with your changes.
  10. In the Property Inspector sidebar, bind events to the element.
    The Property Inspector shows only events available for the selected element. You can select from all global events. The markup of index.html is updated with your changes.
  11. From the main menu, save your changes.

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

Remove 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.