search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Dropdown field in modal form

Asked by Mike Lui
1 year ago.

How can i add dropdown field but the options are from database using api

Answer posted by Dan Letecky [DayPilot]
1 year ago.

You can load the data using fetch() or a similar function before opening the modal dialog.

async function showModal(url) {
  const options = await fetch("/api/getOptions").then(response => response.json());

  const form = [
    {
      name: "Resource",
      id: "resource",
      options: options,
      type: "select",
    },
  ];

  const data = { /* ... */ };

  const modal = await DayPilot.Modal.form(form, data);
  console.log(modal.result);
}

The data returned by the API need to have the correct structure (see https://modal.daypilot.org/form-select-field/).

Comment posted by Las Mark
1 year ago.

Why it is not working huhuhu

I have here my controller
// GET: api/services
        // GET: api/services
        [HttpGet("/api/services")]
        public async Task<MyService>>> GetServices()
        {
            return await _context.Services.ToListAsync();
        }

and this is the form 

<script src="~/lib/daypilot/daypilot-all.min.js" ></script>

<div class="container-fluid py-5 wow fadeInUp">
    <div class="container">
        <div class="columns">
            <div class="column-left" data-wow-delay="0.6s">
                <div id="nav"></div>
            </div>
            <div class="column-main data-wow-delay="0.9s"">
                <div class="toolbar">Available time slots:</div>
                <div id="calendar"></div>
            </div>
        </div>

        <script>
            
            const app = {
                get patientId() {
                    if (!localStorage["patientId"]) {
                        localStorage["patientId"] = DayPilot.guid();
                    }
                    return localStorage["patientId"];
                },
                
                async loadEvents(day) {
                    const start = nav.visibleStart() > DayPilot.Date.now() ? nav.visibleStart() : DayPilot.Date.now();
                    const end = nav.visibleEnd();
                    const patient = app.patientId;

                    const { data } = await DayPilot.Http.get(`/api/appointments/free?start=${start}&end=${end}&patient=${patient}`);


                    if (day) {
                        calendar.startDate = day;
                    }
                    calendar.events.list = data;
                    calendar.update();

                    nav.events.list = data;
                    nav.update();
                },
                init() {
                    app.loadEvents();
                }
            };

            const nav = new DayPilot.Navigator("nav", {
                selectMode: "week",
                showMonths: 2,
                skipMonths: 2,
                onTimeRangeSelected: (args) => {
                    const weekStarts = DayPilot.Locale.find(nav.locale).weekStarts;
                    const start = args.start.firstDayOfWeek(weekStarts);
                    const end = args.start.addDays(7);
                    app.loadEvents(start, end);
                }

            });
            nav.init();

            const calendar = new DayPilot.Calendar("calendar", {
                viewType: "Week",
                businessBeginsHour: 12,
                businessEndsHour: 20,
                timeRangeSelectedHandling: "Disabled",
                eventMoveHandling: "Disabled",
                eventResizeHandling: "Disabled",
                eventArrangement: "SideBySide",
                onBeforeEventRender: (args) => {
                    switch (args.data.status) {
                        case "free":
                            args.data.backColor = "#3d85c6";  // blue
                            args.data.barHidden = true;
                            args.data.borderColor = "darker";
                            args.data.fontColor = "white";
                            args.data.html = `Available`;
                            args.data.toolTip = "Click to request this time slot";
                            break;
                        case "waiting":
                            args.data.backColor = "#e69138";  // orange
                            args.data.barHidden = true;
                            args.data.borderColor = "darker";
                            args.data.fontColor = "white";
                            args.data.html = "Your appointment, waiting for confirmation";
                            break;
                        case "confirmed":
                            args.data.backColor = "#6aa84f";  // green
                            args.data.barHidden = true;
                            args.data.borderColor = "darker";
                            args.data.fontColor = "white";
                            args.data.html = "Your appointment, confirmed";
                            break;
                    }
                },

                onEventClick: async (args) => {
                    if (args.e.data.status !== "free") {
                        calendar.message("Please use a free slot to request an appointment.");
                        return;
                    }
                    
                    async function showModal(url) {
                        const options = await fetch("/api/services").then(response => response.json());

                        const form = [
                            { name: "Request an Appointment" },
                            { name: "From", id: "start", dateFormat: "MMMM d, yyyy h:mm tt", disabled: true },
                            { name: "To", id: "end", dateFormat: "MMMM d, yyyy h:mm tt", disabled: true },
                            { name: "Name", id: "name", type: "text" },
                            { name: "Email", id: "email", type: "text" },
                            {
                                name: "Resource",
                                id: "resource",
                                options: options,
                                type: "select",
                            },
                        ];

                        const data = {
                            id: args.e.id(),
                            start: args.e.start(),
                            end: args.e.end(),
                            patient: app.patientId,
                        };

                        const options = {
                            focus: "name"
                        };

                        const modal = await DayPilot.Modal.form(form, data);
                        if (modal.canceled) {
                            return;
                        }

                        await DayPilot.Http.put(`/api/appointments/${data.id}/request`, modal.result);

                        args.e.data.status = "waiting";
                        calendar.events.update(args.e.data);
                    }
                }

            });
            calendar.init();

            app.init();

        </script>
    </div>
</div>
Comment posted by Dan Letecky [DayPilot]
1 year ago.

If there are no errors in the JavaScript console, I recommend checking the data returned from "/api/services" - it may not be what you expect. In order to display properly in the dropdown, it must be an array of objects with "id" and "name" properties.

Comment posted by Las Mark
1 year ago.

It's now working, thank you so much Dan

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.