App Designer-Change the background color of a cell of a table

Hello,

I have a Table in my application in Matlab App Designer and I want to change the background color of a row (or preferable of a cell of a row) based on some conditions as seen from the code below. However, it's not functioning as i want. Here's the code:

data = app.UITable.Data;
bgColors = app.UITable.BackgroundColor; 

for row = 1:size(data, 1)
    % Extract values
    lowerValue = data{row, 2};  
    targetValue = data{row, 3}; 
    upperValue = data{row, 4};  
    simValue = data{row, 5};    

    if ~isempty(lowerValue) && ~isempty(targetValue) && ~isempty(upperValue)
        lowerBound10 = lowerValue * 0.9;
        upperBound10 = upperValue * 1.1;

        if simValue >= lowerValue && simValue <= upperValue
            bgColors(row, :) = [0, 1, 0];  % Green
        elseif simValue >= lowerBound10 && simValue <= upperBound10
            bgColors(row, :) = [1, 1, 0];  % Yellow
        else
            bgColors(row, :) = [1, 0, 0];  % Red
        end
    end
end

app.UITable.BackgroundColor = bgColors;

[Manish]

Hi,

The mentioned code works well for coloring the rows according to the specified condition.

The line bgColors(row, 1) = [1, 1, 0]; paints the 1st cell with a yellow background.

Would you like to paint only a specific part of the cell?

Could you please clarify the functionality you need, so I can assist you better?

[PanPan]

Hi,

My table consists of 5 columns. Columns 1 and 5 are not editable. The user can input values to columns 2,3 and 4. Then,when these cells are filled,and depending on the values (as expressed with the if condition), I want the background colour of the cell in the 5th column to change accordingly.

Thank you for your help!

Answer 1

[Manish]

Hi,

I understand that you want to paint the background colour of the cells of the 5thcolumn according to the conditions specified.

You can follow the below workaround using ‘uistyle’ and ‘addstyle’ functions to achieve the desired behaviour:

data = app.UITable.Data;
numRows = size(data, 1);
bgColors = repmat([1, 1, 1], numRows, 1);
for row = 1:numRows
    % Extract values
    lowerValue = data{row, 2};  
    targetValue = data{row, 3}; 
    upperValue = data{row, 4};  
    simValue = data{row, 5};    
    if ~isempty(lowerValue) && ~isempty(targetValue) && ~isempty(upperValue)
        lowerBound10 = lowerValue * 0.9;
        upperBound10 = upperValue * 1.1;
        if simValue >= lowerValue && simValue <= upperValue
            bgColors(row, :) = [0, 1, 0];  % Green
        elseif simValue >= lowerBound10 && simValue <= upperBound10
            bgColors(row, :) = [1, 1, 0];  % Yellow
        else
            bgColors(row, :) = [1, 0, 0];  % Red
            
        end
    end
end

%workaround
for i=1:length(bgColors)
    s = uistyle("BackgroundColor",bgColors(i,:));
    addStyle(app.UITable,s,"cell",[i,5]);
end
%app.UITable.BackgroundColor = bgColors;

You can refer to the documentations of ‘uistyle’ and ‘addstyle’ for more information:

• uistyle: https://www.mathworks.com/help/matlab/ref/uistyle.html
• addStyle:https://www.mathworks.com/help/matlab/ref/matlab.ui.control.table.addstyle.html

Hope this helps!

[PanPan]

Hi,

The code works almost correctly now. The background colour is updated when i input the values in columns 2,3 and 4 but the color is always red, even when the simValue is between the lower and the upper Values.

Why could that be?

[Manish]

Hi,

I used the random data mentioned below for the code, and it worked as expected. Could you please share your data and describe the specific instance where you are encountering the problem? This will help me assist you more effectively.

sampleData = {
    'A', 10, 15, 20, 18;  
    'B', 5, 10, 15, 14;   
    'C', 30, 35, 40, 45;  
    'D', 20, 25, 30, 22;  
    'E', 50, 55, 60, 48;  
    'F', 10, 15, 20, 9;   
    'G', 5, 10, 15, 16;   
    'H', 10, 15, 20, 10;  
    'I', 10, 15, 20, 20;  
    'J', [], 15, 20, 18;  
    'K', 10, [], 20, 18;  
    'L', 10, 15, [], 18;  
    };

[PanPan]

Hi,

I updated the code a bit but the issue now is that when i input the lower and the upper value just for one row, all cells in the 5th column become red, and then they change their color depending on the values I input.

data = app.UITable.Data;
data(:, 2:4) = cellfun(@str2double, data(:, 2:4), 'UniformOutput', false);

numRows = size(data, 1);
bgColors = repmat([1, 1, 1], numRows, 1);  % Default background color

for row = 1:numRows
    % Extract values for each row
    lowerValue = data{row, 2};  
    targetValue = data{row, 3}; 
    upperValue = data{row, 4};  
    simValue = data{row, 5};    
    
    if ~isempty(lowerValue) && ~isempty(targetValue) && ~isempty(upperValue) && ~isempty(simValue)
        % Calculate 10% bounds
        lowerBound10 = lowerValue * 0.9;
        upperBound10 = upperValue * 1.1;
        
        % Apply color logic
        if simValue >= lowerValue && simValue <= upperValue
            bgColors(row, :) = [0, 1, 0];  % Green
        elseif simValue >= lowerBound10 && simValue <= upperBound10
            bgColors(row, :) = [1, 1, 0];  % Yellow
        else
            bgColors(row, :) = [1, 0, 0];  % Red
        end
    end
end

% Apply background colors only for the 5th column
for i = 1:numRows
    if any(bgColors(i,:) ~= [1, 1, 1])  % Only apply style if color has changed
        s = uistyle("BackgroundColor", bgColors(i,:));
        addStyle(app.UITable, s, "cell", [i, 5]);  % Apply to the 5th column of each row
    end
end

Answer 2

[Jaimin]

Hi @PanPan

You can use the “CellEditCallback” of a UITable in App Designer. This callback is triggered whenever the value of an editable cell changes. You can implement the logic to change the background color within this callback.

Kindly refer following code snippet for understanding.

function UITableCellEdit(app, event)
            indices = event.Indices;
            row = indices(1);
            rowData = app.UITable.Data(row,:);

            % Extract values for each row
            lowerValue = double(rowData{2});  
            targetValue = double(rowData{3}); 
            upperValue = double(rowData{4});  
            simValue = double(rowData{5});    
            
            if ~isempty(lowerValue) && ~isempty(targetValue) && ~isempty(upperValue) && ~isempty(simValue)
                % Calculate 10% bounds
                lowerBound10 = lowerValue * 0.9;
                upperBound10 = upperValue * 1.1;
                
                % Apply color logic
                if simValue >= lowerValue && simValue <= upperValue
                    bgColors = [0, 1, 0];  % Green
                elseif simValue >= lowerBound10 && simValue <= upperBound10
                    bgColors = [1, 1, 0];  % Yellow
                else
                    bgColors = [1, 0, 0];  % Red
                end
            end
        
            s = uistyle("BackgroundColor", bgColors);
            addStyle(app.UITable, s, "cell", [row, 5]);  % Apply to the 5th column of each row

        end

For more information about “UITable” kindly refer following MathWorks Documentation.

https://www.mathworks.com/help/matlab/creating_guis/add-tables-to-app-designer-apps.html

I hope this will be helpful.

[Walter Roberson]

CellEditCallback is only called when cell data changes due to editting, not when cell data is assigned to app.UITable.Data