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

33 views (last 30 days)
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 Comments
Manish
Manish on 23 Oct 2024
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
PanPan on 23 Oct 2024
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!

Sign in to comment.

Answers (2)

Manish
Manish on 23 Oct 2024
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 Comments
Manish
Manish on 24 Oct 2024
Edited: Walter Roberson on 6 Nov 2024 at 7:10
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
PanPan on 24 Oct 2024
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

Sign in to comment.


Jaimin
Jaimin on 6 Nov 2024 at 6:45
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.
I hope this will be helpful.
  1 Comment
Walter Roberson
Walter Roberson on 6 Nov 2024 at 7:12
CellEditCallback is only called when cell data changes due to editting, not when cell data is assigned to app.UITable.Data

Sign in to comment.

Categories

Find more on Introduction to Installation and Licensing in Help Center and File Exchange

Products


Release

R2024a

Community Treasure Hunt

Find the treasures in MATLAB Central and discover how the community can help you!

Start Hunting!