How to use Appdesigner to keep adding a group of text inputs?

I am thinking using the app designer for purpose similar to this:

A survey form that ask about a person's family.

But one can have many family members. Each group of fields contains things like Name, Age, Gender etc.

Is there a way I can create an appdesigner such that when i click a 'add more' button then another group of fileds will pop out for me to fill in.

How will the data be stored?

Best if it can be done with less tedious/less code methods, using app designer.

Appreciate your help.

[Les Beckham]

I would suggest reusing the same data entry fields and then, each time you press the Add button, copying the contents to a separate text box or uitable, where you list the data for all family members added so far. Internally you would store the data in a cell array or table. This should be a lot simpler than dynamically creating more data entry fields.

[Yi Cheng]

That might work.

However, with this implementation, this means that the user will not be able to edit or delete any details that one has submitted on the appdesigner UI. Would it be possible to display the keyed in information on the app designer UI?

Answer 1

[Marie Anna NOVIELLO]

This technique offers a user-friendly interface that allows users to dynamically add new sections for each family member. The data is structured and can be easily processed or exported later. You can tailor the design and data storage methods to your specific requirements.

Details:

1. FamilySurveyApp class: This is the core app that contains the UI components and manages data.
2. FamilyPanel: This panel contains the data fields for each family member (name, age, gender). It is generated dynamically each time you click the "Add More" button.
3. Add More Button: When clicked, the button creates new panels with the same layout, allowing the user to add as many family members as necessary.
4. Storing Data: The FamilyData property saves references to all input fields so that you may retrieve or analyze them later.

classdef FamilySurveyApp < matlab.apps.AppBase

    % Properties
    properties (Access = public)
        UIFigure         matlab.ui.Figure
        AddMoreButton    matlab.ui.control.Button
        FamilyPanel      matlab.ui.container.Panel
        FamilyData       cell = {};  % Store family member data
    end

    methods (Access = private)
        
        % Callback function for Add More button
        function addMoreButtonPushed(app, event)
            % Get the position of the current panel
            nPanels = length(app.FamilyData);
            
            % Create a new Panel for the new family member
            newPanel = uipanel(app.UIFigure, 'Position', [20, 500 - 120 * (nPanels + 1), 300, 100]);
            
            % Add fields (Name, Age, Gender) inside the new panel
            uicontrol(newPanel, 'Style', 'text', 'String', 'Name:', 'Position', [10, 70, 50, 20]);
            nameField = uicontrol(newPanel, 'Style', 'edit', 'Position', [60, 70, 100, 20]);

            uicontrol(newPanel, 'Style', 'text', 'String', 'Age:', 'Position', [10, 40, 50, 20]);
            ageField = uicontrol(newPanel, 'Style', 'edit', 'Position', [60, 40, 100, 20]);

            uicontrol(newPanel, 'Style', 'text', 'String', 'Gender:', 'Position', [10, 10, 50, 20]);
            genderField = uicontrol(newPanel, 'Style', 'edit', 'Position', [60, 10, 100, 20]);
            
            % Save the UI components to FamilyData
            app.FamilyData{end+1} = struct('Name', nameField, 'Age', ageField, 'Gender', genderField);
        end
        
    end

    % Create UIFigure and components
    methods (Access = public)

        % Construct app
        function app = FamilySurveyApp

            % Create UIFigure
            app.UIFigure = uifigure('Position', [100, 100, 400, 600]);

            % Create the first family panel
            app.FamilyPanel = uipanel(app.UIFigure, 'Position', [20, 500, 300, 100]);
            
            % Add fields (Name, Age, Gender) inside the first panel
            uicontrol(app.FamilyPanel, 'Style', 'text', 'String', 'Name:', 'Position', [10, 70, 50, 20]);
            uicontrol(app.FamilyPanel, 'Style', 'edit', 'Position', [60, 70, 100, 20]);

            uicontrol(app.FamilyPanel, 'Style', 'text', 'String', 'Age:', 'Position', [10, 40, 50, 20]);
            uicontrol(app.FamilyPanel, 'Style', 'edit', 'Position', [60, 40, 100, 20]);

            uicontrol(app.FamilyPanel, 'Style', 'text', 'String', 'Gender:', 'Position', [10, 10, 50, 20]);
            uicontrol(app.FamilyPanel, 'Style', 'edit', 'Position', [60, 10, 100, 20]);
            
            % Create Add More Button
            app.AddMoreButton = uibutton(app.UIFigure, 'push', 'Text', 'Add More', 'Position', [20, 440, 100, 30]);
            app.AddMoreButton.ButtonPushedFcn = @(btn, event) addMoreButtonPushed(app, event);
            
        end
    end
end