Show properties of custom control

[tan09qlmt]

Hello everyone, my team want to show all Properties of Custom Control like TableGrid Control below, how can i do that ? Thank.

My properties of Custom control
defaultAttributes: (attrs) →
attrs.label = ‘MyControl’
attrs.is_master_control = true
attrs.allowSchemaFormatting = true
attrs.label_hidden = false
attrs.label_value = “Sample Label”
attrs.data_type = “string”
attrs.field_composition_type = “composite”
attrs.LiveData = “Data”
attrs.field_datatypes = []
attrs.field_available_in_database_editor = true
attrs.field_editable_in_database_editor = true
attrs.field_client_side_get_data_enabled = true
attrs.field_database_editor_data_format = “single_select”
attrs.field_data_model_binding_type = “manual_query”
attrs.field_data_model_binding_manual_query_with_id =“DATABUILDER()”
attrs.heading_text = “default value tan test”
attrs.header_text_alignment = ‘left’
attrs.header_font_color = ‘#444’
attrs.header_font_weight = ‘500’
attrs.label_size = ‘h2’
attrs.textarea_rows = ‘2’
attrs.line_height = “32”
attrs.line_height_unit = “px”
attrs.letter_spacing = “1”
attrs.letter_spacing_unit = “px”
attrs.action_items = {
“button_click”: {
“events”: [“click”],
“selector”: “.header_body”
}
}
attrs

[SagarBansal]

Hi @tan09qlmt,

To achieve multiple outputs from a control or add properties, such as those provided by a table grid control, you’ll need to follow these steps:

1. Implementing Property and Retrieval:
In order to obtain various properties from a control, like a table grid, you should employ the getPropertiesKeyword function within the sudoComponentFunctions in your CoffeeScript file. Additionally, to make this function accessible for binding within DronaHQ, you should configure it at the main level, outside of sudoComponentFunctions.

Inside sudoComponentFunctions
getPropertiesKeyword = (property) → Refer below image

This function is used to set extra property values added to the control like in table grid we have tablegrid.PROPERTIES.LIMIT this function is used to get values of these extra keywords.
Can be defined like below:
getPropertiesKeyword: (ctrModel) →
id = ctrModel.get(“field_key_name”)
name = ctrModel.get(“field_display_key_name”)
extraKeyword = {}
extraKeyword[[id,“PROPERTIES”, “SEARCHTEXT”].join(".")] = () → “”
extraKeyword[[id,“PROPERTIES”, “OFFSET”].join(".")] = () → ctrModel.get(“offset”)

Implementation logic to retrieve the specified property
Which can be defined as below outside of sudoComponentFunctions :
getPropertiesKeyword: (mjson) →
id = mjson.field_key_name
name = mjson.field_display_key_name
extraKeyword = {}
extraKeyword[[id,“PROPERTIES”, “SEARCHTEXT”].join(".")] = {
name: [name,“PROPERTIES”, “SEARCHTEXT”].join("."),
data_type: “PROPERTIES”
}
extraKeyword[[id,“PROPERTIES”, “OFFSET”].join(".")] = {
name:[name,“PROPERTIES”, “OFFSET”].join("."),
data_type: “number”
}

2. Defining Property Value Extraction:
Define the getPropertiesKeywordDataMap function in a JavaScript file. This function is employed to retrieve values of additional properties.
For instance:
this.getPropertiesKeywordDataMap = function () {
var id = this.model.field_key_name;
var name = this.model.field_display_key_name;
var map = {};
map[[id, “PROPERTIES”, “SEARCHTEXT”].join(".")] = this._getSearchText.bind(this);
// Define more properties and their corresponding functions
return map;
};

3. Implementing Property Functions:
You need to provide definitions for the property functions that can be invoked from the getPropertiesKeywordDataMap. These functions will be called as follows:
this._getSearchText = function () {
return this.$el.find(’.wildCardSearch’).val();
}; this._getOffset = function () {
var offset = this.model.offset;
return offset;
};

4. Triggering Property Changes:
Finally, you can trigger changes in these property values as needed using the triggerPropertyChange method. For instance
var self = this;
self.triggerPropertyChange(“OFFSET”);

For more detailed information, you can refer to the provided link:
DronaHQ Advanced Concepts - Multiple Outputs from a Control

Thanks