NEW VERSION RELEASED! Webix 11 Read More Core Updates, Extended Functionalities in SpreadSheet and File Manager and more

JavaScript Property Sheet UI 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.

live demo

Layout
Width
250
Height
480
Data loading
Data url
https://webix.com/data
Type
json
Use JSONP
Styling
Position
right
Theme
dark
Main color
#003E7C
  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Samples of PHP, Node.js, .NET integration
  • Support of All Modern browsers
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

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.

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

Layout
Width
250
Height
480
Data loading
Data url
https://webix.com/data
Type
json
Use JSONP
Styling
Position
right
Theme
dark
Main color
#003E7C
Submitted values.

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.

Data source
Data url
https://webix.com/kanban/
Data type