Employee photo in a HTML custom block

Frappe Framework Customization
1

Hi there,

Im new in Frappe world. Im having some issues trying to add an employee photo in a HTML custom block.

I tried this:

HTML:

<img id="imageUser" class="user-image" alt="Imagen de Usuario">

JS:

const urlParams = new URLSearchParams(window.location.search);
const imageUser = urlParams.get('imageUser');
document.getElementById('imageUser').src = imageUser;`Preformatted text`
type or paste code here

But I only get this:
imagen_2024-09-26_172954869

Could someone give me some help, please?
Thanks in advance.

Hernán

2

first, you have to get the employee image.

Please check the example and how it works the Custom HTML Block: How to use custom html block - #7 by NCP

3

Hi @NCP
Thanks for your help.

I checked your explanation, but I couldnt get the image.
Here is what a tried:

HTML

<div id="imageuser2"></div>

JS

frappe.call({
    method: "frappe.client.get",
        args: {
            doctype: "User",
            name: frappe.session.user,
             },
             callback(r) {
                 if(r.message) {
                    root_element.querySelector('#imageUser').textContent=r.imageuser2;
                 }
             }
});

Is there a minor error or isnt the way to get de user image?
Thanks again

4

Check your selector, it doesn’t match your container’s id. Also why are you changing the text content?

5

Hi @Yamen_Zakhour, thanks for your answer.

I update the selector to match with container ID, but it still not working.
About your question, I dont have an answer, as I said later, Im not experienced with frappe nor js, so Im just trying.

HTML

<div id="imageUser"></div>

JS

frappe.call({
    method: "frappe.client.get",
        args: {
            doctype: "User",
            name: frappe.session.user,
             },
             callback(r) {
                 if(r.message) {
                    root_element.querySelector('#imageUser').textContent=r.imageUser;
                 }
             }
});

Is this what you were saying to update?
Thanks!

6

did you find any work around?

7

Hi @Rebaz_Balisani
Yes, here is the code.

HTML

<div class="container-main-data">
    <div class="card1">
        <div class="card-header">
            <img id="user_image" alt="Avatar" class="profile-image">
            <div>
                <p class="status">Activo</p>
                <h2 class="name" id="full_name"></h2>
                <p class="position"></p>
            </div>
        </div>
        <div class="card-body1">
            <div class="employee-info">
                <p id="employee-id"></p> <!-- Displays Employee ID (Legajo) -->
                <p id="department"></p> <!-- Displays Department -->
                <p id="email_user"></p> <!-- Displays Email -->
                <p id="report-to"></p> <!-- Displays Report To (Superior) -->
                <br>
            </div>
        </div>
    </div>

JS

// Llamada para obtener el nombre, correo y foto del usuario
frappe.call({
    method: "frappe.client.get",
    args: {
        doctype: "User",
        name: frappe.session.user,
    },
    callback(r) {
        if (r.message) {
            root_element.querySelector("#full_name").textContent = r.message.full_name;
            root_element.querySelector("#email_user").textContent = r.message.name;
            root_element.querySelector("#user_image").src = r.message.user_image;
        }
    }
});

// Obtener legajo del empleado y actualizar campos personalizados en el HTML
frappe.call({
    method: "frappe.client.get_list",
    args: {
        doctype: "Employee",
        filters: { user_id: frappe.session.user },
        fields: ["name", "employee", "designation", "default_shift", "custom_documento", "department", "custom_superior"]
    },
    callback(r) {
        const legajoElement = root_element.querySelector('#employee-id');
        const empleadoElement = root_element.querySelector('#employee-code');
        const documentoElement = root_element.querySelector('.employee-info p:nth-child(2)');
        const positionElement = root_element.querySelector('.position');
        const turnoLaboralElement = root_element.querySelector('.clock-header p:nth-child(3)');
                const departmentElement = root_element.querySelector('#department'); // Department field
        const reportToElement = root_element.querySelector('#report-to');   // Report-to field
        
        

        if (r.message && r.message.length > 0) {
            const employeeData = r.message[0];
            
            // Actualiza campos de legajo y otros datos
            legajoEmpleado = employeeData.name || null;
            legajoElement.textContent = `Legajo N° ${employeeData.employee}`;
            empleadoElement.textContent = `Empleado: ${employeeData.employee}`;
            
            // Actualiza el número de documento
            documentoElement.textContent = `DNI ${employeeData.custom_documento || "No disponible"}`;
            
            // Actualiza la posición
            positionElement.textContent = employeeData.designation || "Posición no especificada";
            
            // Actualiza el turno laboral
            turnoLaboralElement.textContent = `Turno laboral: ${employeeData.default_shift || "No especificado"}`;

departmentElement.textContent = `Departamento: ${employeeData.department || "No disponible"}`;
            reportToElement.textContent = `Reporta a: ${employeeData.custom_superior || "No disponible"}`;
            

            verificarUltimoRegistro();
        } else {
            legajoElement.textContent = "Sin legajo asignado";
            documentoElement.textContent = "DNI no disponible";
            positionElement.textContent = "Posición no especificada";
            turnoLaboralElement.textContent = "Turno laboral no especificado";
                       
                        deshabilitarBotones();
        }
    }
});