Adding dropdown option from GUI in App Designer

Is there a way to permanently add another option to a dropdown menu without having to go to the code? I will be getting objects periodically that I need to add to the list of options and I wonder if there is a way to add them from the app.

I was thinking about creating a character vector that can be modified through the gui and then make this the input to dropdown.Items. The problem is that from the codeview of my app, that is not a line of code I can modify.

The other option I thought of was activating the "allow users to type in text" function. But this won't remember the options that are typed in for future uses of the dropdown, which is something I would need.

Does anybody know how I can do it?

Thanks!

Answer 1

[TADA]

I would put the options in a text file. Then load it during startup

[TADA]

You can take it one step further

According to the documentation the ValueChangedData has a property that indicates if the value change was due to user editing.

So you can set a callback function in ValueChangedFcn, and check for user edited values, then append this option to the file if it doesn't exist already.

I never tried that, but if adding new options happens often, it would improve your user experience dramatically as opposed to having to update the text file every time

[EnergyLights]

Thanks! But after I load the text file, how do I asign it to my dropdown.Items?

[TADA]

For the sake of this example, let's make it a fully extensible settings struct and not just a list of strings for your drop down options

That can be saved in XML or JSON formats very easily (let's use the leaner JSON format):

That's the content of the settings file ("settings.json") which is saved in the same folder as the app:

{"Options":["opt1","opt2","opt3"]}

it translates to a struct with one field using jsondecode, the same as writing this line of code:

struct('Options', {{'opt1', 'opt2', 'opt3'}})
ans = 

  struct with fields:

    Options: {'opt1'  'opt2'  'opt3'}

I was curious if it would work, so I cooked up this small app:

classdef AppExample < matlab.apps.AppBase

    % Properties that correspond to app components
    properties (Access = public)
        UIFigure       matlab.ui.Figure
        DropDownLabel  matlab.ui.control.Label
        DropDown       matlab.ui.control.DropDown
        Settings       struct
        SettingsFile = fullfile(fileparts(which('AppExample')), 'settings.json');
    end

    % App initialization and construction
    methods (Access = private)

        % Create UIFigure and components
        function createComponents(app)
            % load settings
            settingsStr = fileread(app.SettingsFile);
            app.Settings = jsondecode(settingsStr);
            
            % Create UIFigure
            app.UIFigure = uifigure;
            app.UIFigure.Position = [100 100 640 480];
            app.UIFigure.Name = 'UI Figure';

            % Create DropDownLabel
            app.DropDownLabel = uilabel(app.UIFigure);
            app.DropDownLabel.HorizontalAlignment = 'right';
            app.DropDownLabel.Position = [80 306 66 22];
            app.DropDownLabel.Text = 'Drop Down';

            % Create DropDown
            app.DropDown = uidropdown(app.UIFigure);
            app.DropDown.Editable = true;
            app.DropDown.Position = [161 306 100 22];
            
            % listen to edit event
            app.DropDown.ValueChangedFcn = @app.onDropDownValueChanged;
            
            % bind options to drop down
            app.DropDown.Items = app.Settings.Options;
        end
        
        function onDropDownValueChanged(app, src, edata)
            % if this value changed is due to user editing the field
            if edata.Edited
                % add new option
                app.addNewOption(edata.Value);
            end
            
            % handle value changed normally
        end
        
        function addNewOption(app, value)
            % if this option did not exist before, add it to the settings struct and save it
            if ~ismember(value, app.Settings.Options)
                % add item to settings
                app.Settings.Options{numel(app.Settings.Options)+1} = value;
                
                % bind drop down elements
                app.DropDown.Items = app.Settings.Options;
                
                % save edited settings
                settingsText = jsonencode(app.Settings);
                fid = fopen(app.SettingsFile, 'w');
                fwrite(fid, settingsText(:));
                fclose(fid);
            end
            
        end
    end

    methods (Access = public)

        % Construct app
        function app = AppExample

            % Create and configure components
            createComponents(app)

            % Register the app with App Designer
            registerApp(app, app.UIFigure)

            if nargout == 0
                clear app
            end
        end

        % Code that executes before app deletion
        function delete(app)

            % Delete UIFigure when app is deleted
            delete(app.UIFigure)
        end
    end
end

Now this app would load the options from the settings file at startup, but would also update the file whenever the user edits the options list

[EnergyLights]

This is great! Thanks so much

[TADA]

Cheers

[ahmad salim]

Hi there,

I am new to appdesigner, and for some reason I can't edit the grayed out code in the code view of my MatLab app to make the changes above. Any idea how I can edit the code? Thank you.

[TADA]

I think it would be best if you post a new question with this whole new problem