{"id":1593,"date":"2023-12-27T08:00:31","date_gmt":"2023-12-27T07:00:31","guid":{"rendered":"http:\/\/192.168.20.3\/?p=1593"},"modified":"2024-12-09T16:15:29","modified_gmt":"2024-12-09T15:15:29","slug":"carga-y-mapeos-de-ficheros-excel-en-sapui5","status":"publish","type":"post","link":"https:\/\/orekait.com\/es\/carga-y-mapeos-de-ficheros-excel-en-sapui5\/","title":{"rendered":"Carga y mapeos de ficheros Excel en SAPUI5
<\/span>"},"content":{"rendered":"

[et_pb_section fb_built=”1″ admin_label=”section” _builder_version=”4.16″ global_colors_info=”{}”][et_pb_row admin_label=”Imagen principal” _builder_version=”4.16″ background_size=”initial” background_position=”top_left” background_repeat=”repeat” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.16″ custom_padding=”|||” global_colors_info=”{}” custom_padding__hover=”|||”][et_pb_image src=”https:\/\/orekait.com\/wp-content\/uploads\/2023\/12\/Sapui5.png” alt=”cloud-public” title_text=”Sapui5″ admin_label=”Imagen principal” module_class=”post-img” _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_image][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=”Cuerpo” _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text admin_label=”Texto” _builder_version=”4.25.2″ header_2_font_size=”24px” header_3_font_size=”20px” background_size=”initial” background_position=”top_left” background_repeat=”repeat” global_colors_info=”{}”]<\/p>\n

En este art\u00edculo hablaremos sobre c\u00f3mo cargar y mapear un fichero Excel en SAPUI5.<\/p>\n

Muchas veces nos interesa consumir documentos en formato Excel y visualizar los datos que contienen en nuestras aplicaciones FIORI, ya sea para visualizar y seleccionar los datos a cargar de una forma m\u00e1s sencilla o para automatizar un proceso de carga manual.<\/p>\n

A continuaci\u00f3n, se explicar\u00e1n los pasos a seguir para este fin.<\/p>\n

Creaci\u00f3n de elemento en la vista<\/strong><\/h2>\n

El primer paso para ello es tener nuestro elemento para poder acceder al explorador de archivos, para lo que utilizaremos la librer\u00eda\u00a0xmlns unified<\/em>\u00a0de SAPUI5.<\/p>\n

\n
\"\"<\/figure>\n<\/div>\n

 <\/p>\n

En el atributo\u00a0fileType\u00a0<\/em>del elemento\u00a0FileUploader<\/em>\u00a0es donde podemos decirle qu\u00e9 tipos de archivos esperamos que se carguen, en este caso, los correspondientes a las diferentes versiones de Excel.<\/p>\n

Hay otros dos par\u00e1metros que ser\u00e1 necesario a\u00f1adir, uno contendr\u00e1 el nombre del archivo y ser\u00e1 del tipo\u00a0Text<\/em>\u00a0y otro que contendr\u00e1 los datos de este que ser\u00e1 de tipo\u00a0bar<\/em>.<\/p>\n

\n
\"\"<\/figure>\n<\/div>\n

 <\/p>\n

Por \u00faltimo, configuraremos los eventos\u00a0uploadComplete, typeMissmatch<\/em>\u00a0<\/strong>y\u00a0change<\/em><\/strong>\u00a0del elemento\u00a0FileUploader<\/em>.<\/p>\n

En el siguiente punto veremos c\u00f3mo configurarlos en nuestro controlador.<\/p>\n

Controlador:<\/strong><\/h2>\n

En el controlador de la vista hay que crear una funci\u00f3n por cada evento.<\/p>\n

    \n
  • typeMissmatch<\/em>:\u00a0<\/strong>utilizamos este evento para comprobar que el tipo del fichero seleccionado coincide con los tipos establecidos en la propiedad\u00a0fileType<\/em>. Configuramos la funci\u00f3n de manera que recorramos los tipos de archivo que habremos configurado en el atributo\u00a0fileType.\u00a0<\/em>Recogeremos esta propiedad desde el evento de la funci\u00f3n.\u00a0oEvent.getSource().getFileType();<\/em><\/li>\n<\/ul>\n
      \n
    • Cuando el valor del input cambie se activara el evento\u00a0Change<\/em>\u00a0<\/strong>que nos a\u00f1adir\u00e1 el documento a la variable:\u00a0 sap.ui.getCore()._file\u00a0<\/em>\u00a0desde el par\u00e1metro\u00a0files\u00a0<\/em>del evento.<\/li>\n<\/ul>\n
        \n
      • Una vez finalizada la carga del documento se activa el evento\u00a0uploadComplete<\/em>\u00a0<\/strong>que verificar\u00e1 y nos confirmar\u00e1 el \u00e9xito de la carga.<\/li>\n<\/ul>\n

        Utilizaci\u00f3n y lectura del documento<\/strong><\/h2>\n
          \n
        1. Llamamos a la funci\u00f3n de lectura y creamos un JSON con los datos de cada hoja de nuestro archivo Excel:<\/li>\n<\/ol>\n
          \n
          \"\"<\/figure>\n<\/div>\n

          Se crear\u00e1 un archivo JSON como el siguiente, donde tendremos 3 niveles: Hoja, l\u00ednea y columna.<\/p>\n

          \n
          \"\"<\/figure>\n<\/div>\n
            \n
          • Procesamos la Hoja.<\/li>\n<\/ul>\n

            Para procesar la hoja recorreremos el JSON que hemos creado.<\/p>\n

            Nuestro objetivo ser\u00e1 acceder a cada celda para obtener la informaci\u00f3n necesaria.<\/p>\n

            \n
            \"\"<\/figure>\n<\/div>\n

            Indicando la hoja, el n\u00famero de l\u00ednea y la columna podemos acceder al dato de la celda.<\/p>\n

            \n
            \"\"<\/figure>\n<\/div>\n

             <\/p>\n

            Las columnas se nombrar\u00e1n con los nombres \u201c__EMPTY_numero de columna\u201d<\/p>\n

            \n
            \"\"<\/figure>\n<\/div>\n

             <\/p>\n

            Hay que tener en cuenta que, as\u00ed como las columnas en blanco s\u00ed que se contabilizan para determinar el n\u00famero\u00a0Empty<\/em>. Las l\u00edneas en blanco no, por tanto, tendremos tantas l\u00edneas contabilizadas como l\u00edneas tengamos con al menos una celda con dato.<\/p>\n

            Una vez obtenemos los datos de cada celda, podremos utilizar estos como nos interese en nuestra aplicaci\u00f3n FIORI. Por ejemplo, podremos crear objetos con los diferentes datos y cargando un modelo JSON utilizarlo en una tabla.<\/p>\n

            \n
            \"\"<\/figure>\n<\/div>\n
            \"\"<\/figure>\n

             <\/p>\n

            Esperamos que este art\u00edculo te haya servido de ayuda. Si tienes alguna duda, puedes ponerte en contacto con el equipo de UX\/I por tel\u00e9fono:\u00a0945 067 219<\/strong>\u00a0o por email:\u00a0orekait@orekait.com<\/strong>.<\/p>\n

            [\/et_pb_text][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=”M\u00e1s informaci\u00f3n” _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_text _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”]<\/p>\n

            M\u00e1s informaci\u00f3n:<\/p>\n

            [\/et_pb_text][et_pb_button button_url=”https:\/\/orekait.com\/es\/area-personalizacion” button_text=”M\u00e1s informaci\u00f3n” module_class=”entrada-btn” _builder_version=”4.25.2″ _module_preset=”default” custom_button=”on” button_text_color=”#8156EA” button_bg_color=”RGBA(255,255,255,0)” button_border_color=”#8156EA” button_border_radius=”30px” button_font=”Plus Jakarta Sans|600|||||||” button_icon=”$||divi||400″ button_icon_color=”#8156EA” button_on_hover=”off” hover_enabled=”0″ global_colors_info=”{}” button_text_color__hover_enabled=”on|desktop” button_text_color__hover=”#8156EA” button_bg_color__hover_enabled=”on|hover” button_bg_color__hover=”#8156EA” button_bg_enable_color__hover=”on” button_icon_color__hover_enabled=”on|hover” button_icon_color__hover=”#ffffff” url_new_window=”on” sticky_enabled=”0″][\/et_pb_button][et_pb_divider show_divider=”off” _builder_version=”4.25.2″ _module_preset=”default” custom_margin=”||40px||false|false” global_colors_info=”{}”][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=”on” admin_label=”Noticias relacionadas titulo” module_id=”fondo-articulos” _builder_version=”4.25.2″ _module_preset=”default” background_color=”#f7f7f7″ width=”100%” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_divider show_divider=”off” _builder_version=”4.25.2″ _module_preset=”default” background_color=”RGBA(255,255,255,0)” custom_margin=”||40px||false|false” global_colors_info=”{}”][\/et_pb_divider][et_pb_heading title=”Quizas te pueda interesar” _builder_version=”4.25.2″ _module_preset=”default” title_level=”h2″ title_text_align=”center” global_colors_info=”{}”][\/et_pb_heading][et_pb_divider show_divider=”off” _builder_version=”4.25.2″ _module_preset=”default” custom_margin=”||30px||false|false” global_colors_info=”{}”][\/et_pb_divider][\/et_pb_column][\/et_pb_row][et_pb_row admin_label=”Noticias relacionadas” _builder_version=”4.25.2″ _module_preset=”default” width=”100%” custom_margin=”-150px||||false|false” custom_margin_tablet=”0px||||false|false” custom_margin_phone=”0px||||false|false” custom_margin_last_edited=”on|desktop” global_colors_info=”{}”][et_pb_column type=”4_4″ _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][et_pb_blog fullwidth=”off” posts_number=”3″ include_categories=”current” show_author=”off” show_date=”off” show_pagination=”off” _builder_version=”4.25.2″ _module_preset=”default” global_colors_info=”{}”][\/et_pb_blog][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"

            En este art\u00edculo hablaremos sobre c\u00f3mo cargar y mapear un fichero Excel en SAPUI5. Muchas veces nos interesa consumir documentos en formato Excel y visualizar los datos que contienen en nuestras aplicaciones FIORI, ya sea para visualizar y seleccionar los datos a cargar de una forma m\u00e1s sencilla o para automatizar un proceso de carga […]<\/p>\n","protected":false},"author":3,"featured_media":1595,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"on","_et_pb_old_content":"Lorem ipsum dolor sit amet consectetur adipiscing elit congue montes, imperdiet taciti erat elementum fermentum sem ante ultrices ridiculus, sagittis sociis egestas quisque ac semper quis odio. Aenean hendrerit ac metus dis nascetur aliquet mollis integer, rutrum vel laoreet posuere proin sagittis luctus est, tempus duis nisl ultrices parturient tempor praesent. Dignissim curabitur nascetur pellentesque augue fringilla pulvinar eros, tempus fames vehicula maecenas cubilia id, rutrum euismod integer ut scelerisque mus.\r\n\r\nVivamus auctor odio aenean rhoncus natoque dictum purus, volutpat pellentesque laoreet ridiculus consequat nisi varius euismod, augue platea convallis curae magnis taciti. Imperdiet nibh curabitur quisque orci consequat aenean pellentesque, cubilia duis senectus felis sed posuere tortor, magnis enim diam a odio sociis. Enim tellus nisl nec molestie augue luctus tempor habitant, nunc dictumst phasellus volutpat sem facilisis taciti, habitasse laoreet at turpis vel fermentum vulputate.","_et_gb_content_width":"","footnotes":""},"categories":[53,52,51],"tags":[],"class_list":["post-1593","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sap-fiori-ux","category-sapui5","category-user-experience-integracion"],"_links":{"self":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/1593","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/comments?post=1593"}],"version-history":[{"count":13,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/1593\/revisions"}],"predecessor-version":[{"id":20718,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/posts\/1593\/revisions\/20718"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/media\/1595"}],"wp:attachment":[{"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/media?parent=1593"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/categories?post=1593"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/orekait.com\/es\/wp-json\/wp\/v2\/tags?post=1593"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}