Webix 11.4 Released Read More New Features in Core, Kanban & Rich Text Editor, plus a Powerful SpreadSheet Update

JavaScript Property Sheet Widget

PropertySheet is an editable and configurable list of properties. This component can be used in visual editors that allow users to change the look and behavior of the components and instantly
see the results.

Overview

You can manipulate the elements of Property Sheet in the same way as you do it with Form or HTMLForm elements. Besides, this widget is able to display complex values.

Property Sheet Key Features

Editing Data

According to the nature of a property that you're going to change, Property Sheet provides you with the possibility to use different editing modes. If you want to change a simple numeric value, a simple text editor should be used. If your goal is to change the color value, Property Sheet will allow you to pick a particular color from a pop-up Colorboard.

Click on any value to edit it. Then click the 'Submit' button

Adding new editor types

If the default editing modes aren't enough for your needs, you can register custom editors. For example, instead of text or select editors you can create a toggle button that changes its value by clicking on it.

Property Sheet – Part of Webix UI Library

Get a 30-day free trial to test Property Sheet along with 100+ UI widgets, a common API, and a shared data layer for building data-driven web apps.

Property Sheet – Part of Webix UI Library

Get a 30-day free trial to test Property Sheet along with 100+ UI widgets, a common API, and a shared data layer for building data-driven web apps.

Other data widgets