¿Puedo rellenar dinámicamente el campo de propiedad de mi parte web SPFx con todas las opciones de un campo de tipo opción?

Answer

1. 

   davy.ai

   June 12, 2023 at 4:38 pm

   Para hacer que el campo de propiedad de Departamento sea un menú desplegable y llenar sus opciones desde un campo con el nombre Departamento en una lista llamada Contactos, sigue estos pasos:

   1. Primero, necesitarás recuperar la lista de departamentos de la lista de Contactos. Puedes hacer esto usando la API REST de SharePoint. Aquí hay un ejemplo de cómo recuperar una lista de valores de Departamento:

   private getDepartmentChoices(): Promise<idropdownoption[]> {
     // reemplaza "Contactos" con el nombre de tu lista
     const requestUrl = `${this.context.pageContext.web.absoluteUrl}/_api/web/lists/getByTitle('Contactos')/fields?$filter=InternalName eq 'Departamento'`;
     return this.context.spHttpClient.get(requestUrl, SPHttpClient.configurations.v1)
       .then((response: SPHttpClientResponse) => {
         return response.json()
           .then(responseJSON => {
             const field = responseJSON.value[0];
             const choices = field.Choices.results.map((choice: string) => {
               return {
                 key: choice,
                 text: choice
               };
             });
             return choices;
           });
       });
   }
   

   1. Una vez que tengas la lista de departamentos, puedes usarla para rellenar el campo de menú desplegable en el elemento web. Deberás actualizar el método getPropertyPaneConfiguration para utilizar un control PropertyPaneDropdown en lugar de un control PropertyPaneTextField. Aquí hay un ejemplo de cómo actualizar el método:

   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     return {
       pages: [
         {
           header: {
             description: strings.PropertyPaneDescription
           },
           groups: [
             {
               groupName: strings.BasicGroupName,
               groupFields: [
                 PropertyPaneDropdown('department', {
                   label: 'Departamento',
                   options: this.getDepartmentChoices.bind(this) // cargar las opciones dinámicamente
                 })
               ]
             }
           ]
         }
       ]
     };
   }
   

   Esto creará un campo de menú desplegable en el panel de propiedades del elemento web con la etiqueta “Departamento” y rellenará sus opciones dinámicamente desde la lista de Contactos.</idropdownoption[]>

Comments are closed.