AutoqueryGrid Vue replacing edit form

[paulina]

I was hoping to provide a custom form for the AutoQueryGrid using the editForm slot, but it doesn’t appear in the slide out and instead displays the content above the screen as per screenshot,
can you give me an example how to provide a custom form that will use the slide out or card ?

Thanks

<template>
  <AutoQueryGrid
      :filter="query"
      selected-columns="id"
      type="ServiceMaintenanceRepairEntry"
  >
    <template #editform="{ form, apis, type }">
      <h1>kjkjsfdksfsldkfjsldkfslkfjslfksfHHIII</h1>
    </template>


  </AutoQueryGrid>
</template>

[mythz]

Here’s an example which uses #editform:

CreatorKit/wwwroot/portal/index.html

The #editform template replaces AutoQueryGrid’s built-in AutoEditForm, i.e. the SlideOver/Card isn’t apart of AutoQueryGrid, It’s included in the AutoEditForm/AutoForm components which you can control using formStyle="slideOver|card" property, or you can use your own Form/ModalDialog.

[paulina]

Great thanks pointing me in the right direction, I have implemented a custom form, however the Autoquerygrid does not show the updated values and requires a manual refresh do I need to call something else besides done()?

<template>
  <AutoQueryGrid
      :filter="query"
      type="ServiceMaintenanceRepairEntry"
  >
    <template #editform="{model, save, done}">
      <SlideOver @cancel="handleDone(done)" @close="handleClose" @done="handleDone(done)">
        <template #subtitle>
          Edit
        </template>

        <form v-if="model" ref="form"
              @submit.prevent="submitSignupDocumentsForm($event.target as HTMLFormElement,model,done)">
          <ErrorSummary/>
          <div class="shadow sm:overflow-hidden sm:rounded-md">
            <div class="space-y-8 py-6 px-4 sm:p-6 bg-white dark:bg-black">
              <input v-model="(model as ServiceMaintenanceRepairEntry).id" name="id" type="hidden"/>

              <div class="border-b border-gray-200 dark:border-gray-700 pb-6">

                <div class="space-y-6">
                  <div class="grid grid-cols-1 gap-6">

                    <div class="flex items-center ">
                      <TextInput id="description" v-model="model.description"
                                 help="" label="Info"
                                 placeholder=""/>
                    </div>
                    <div class="flex items-center ">
                      <FileInput id="attachmentUrl" v-model="(model as ServiceMaintenanceRepairEntry).description"
                                 :status="fieldErrors" label="Upload file"/>
                      <FilePreview :url="(model as ServiceMaintenanceRepairEntry).attachmentUrl"/>
                    </div>
                  </div>
                </div>
              </div>
              <div class="bg-gray-50 dark:bg-gray-800 px-4 py-3 text-right sm:px-12">
                <PrimaryButton :disabled="isLoading">Save</PrimaryButton>
              </div>
            </div>
          </div>
        </form>
      </SlideOver>
    </template>
  </AutoQueryGrid>
</template>

async function submitSignupDocumentsForm(form: HTMLFormElement, model: UpdateServiceMaintenanceRepairEntry, done: () => void) {
  // save 
  let formData = new FormData(form)
  let request = new UpdateServiceMaintenanceRepairEntry();

  let method = map(request?.['getMethod'], fn => typeof fn == 'function' ? fn() : null) || 'POST'
  let returnsVoid = map(request?.['createResponse'], fn => typeof fn == 'function' ? fn() : null) == null

  if (HttpMethods.hasRequestBody(method)) {
    if (!returnsVoid) {
      api.value = await client.apiForm(request, formData)
    } else {
      api.value = await client.apiFormVoid(request, formData)
    }
  } else {
    let requestDto = new UpdateServiceMaintenanceRepairEntry(omitEmpty(model))
    if (!returnsVoid) {
      api.value = await client.api(requestDto)
    } else {
      api.value = await client.apiVoid(requestDto)
    }
  }

  if (api.value.succeeded) {
    emit('success', api.value.response)
    close()
  } else {
    emit('error', api.value.error!)
  }

  done();
}

[mythz]

Invoke the save callback (i.e. instead of the done callback) if your Edit form has made changes.