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

Question

PanPan 2024-10-23，9:09

0
链接

此问题的直接链接

https://ww2.mathworks.cn/matlabcentral/answers/2161595-app-designer-change-the-background-color-of-a-cell-of-a-table

评论： Walter Roberson 2024-11-6，7:12

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;

2 个评论
显示无隐藏无

Manish 2024-10-23，10:55

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 2024-10-23，11:22

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 2024-10-23，11:59

0
链接

此回答的直接链接

https://ww2.mathworks.cn/matlabcentral/answers/2161595-app-designer-change-the-background-color-of-a-cell-of-a-table#answer_1536290

在 MATLAB Online 中打开

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:

Hope this helps!

3 个评论
显示 1更早的评论隐藏 1更早的评论

Manish 2024-10-24，5:37

编辑：Walter Roberson 2024-11-6，7:10

在 MATLAB Online 中打开

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 2024-10-24，8:09

在 MATLAB Online 中打开

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 2024-11-6，6:45

0
链接

此回答的直接链接

https://ww2.mathworks.cn/matlabcentral/answers/2161595-app-designer-change-the-background-color-of-a-cell-of-a-table#answer_1541620

在 MATLAB Online 中打开

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.

1 个评论
显示 -1更早的评论隐藏 -1更早的评论

Walter Roberson 2024-11-6，7:12

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

请先登录，再进行评论。

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

2 个评论
显示无隐藏无

回答（2 个）

3 个评论
显示 1更早的评论隐藏 1更早的评论

1 个评论
显示 -1更早的评论隐藏 -1更早的评论

另请参阅

类别

标签

产品

版本

Community Treasure Hunt

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

2 个评论 显示 无隐藏 无

回答（2 个）

3 个评论 显示 1更早的评论隐藏 1更早的评论

1 个评论 显示 -1更早的评论隐藏 -1更早的评论

另请参阅

类别

标签

产品

版本

Community Treasure Hunt

2 个评论
显示无隐藏无

3 个评论
显示 1更早的评论隐藏 1更早的评论

1 个评论
显示 -1更早的评论隐藏 -1更早的评论