How to modify a cutom UI component

I am trying to edit a custom UI component (attached). I need to add an editable Text field side-by-side each Checkbox.

I though I could just open the custom component with the Designer. Then drag and drop the Edit Fields onto the GridLayout.

Unluckily regardless of the control I pick from the component library, I cabnnot drop it onto the GridLayout. It does not stick to it.

My question is:

Shall I add regular components to the GridLayout programmatically, that is changing the generated code?

Otherwise?

Thank you in advance

Maura

Answer 1

[Rahul]

Hi @Maura Monville,

As I understand from the given 'mlapp' file, you are trying to set a 'GridLayout' in your app where the 'ColumnWidth' and 'RowHeight' properties are set to 'fit' which provides limited space for each column and row based on the component inside the cell.

In order to add a Text Field beside the Checkbox, consider following the given steps:

• The Edit TextField component of App Designer has two components, one is the Label of the TextField and one is the TextField. Hence, based on your requirement of adding the Label or not, add one or two columns to the GridLayout repectively.
• Columns can be added in the following way: Inside the 'ColumnWidth' property of Grid Layout, add another 'fit' to create another column. Incase Label of the TextField is to be accomodated, it is best to add another column.
• Now, add the Edit TextField component to the new column/columns added. Thois component would take the space of 2 columns.
• Incase the Label for the TextField is not required and you can see that the Default Label is overlaid on the Checkbox text, then select the Label and delete it directly.

Here is an example:

The following MathWorks documentations can be referred to know more:

'GridLayout Properties': https://www.mathworks.com/help/releases/R2022a/matlab/ref/matlab.ui.container.gridlayout-properties.html

Thanks.