getUserImage

Returns the absolute URL path of a users profile picture. It takes an option object that must contain the PrimKey of the record in atbl_Personnel_Employees, the login/personId of the employee and the image hash (ImageHash column).

In addition, you can give a size. Size is restricted to the values xs, sm, md, lg and xl, which resizes the image to have a maximum with according to the table below. The default size is xs/64px

size	Max width
xs	64px
sm	128px
md	256px
lg	512px
xl	no limit

By using this function instead of using a path with a reference to the data object, we can have cached images across multiple applications.

Usage

You can aither pass the values as an option object, or as separate arguments. In this example, both components will render the same image.

import { getUserImage } from "@olenbetong/appframe-core";
import { useCurrentRow } from "@olenbetong/appframe-react";

function ProfilePicture() {
  let record = useCurrentRow(dsMyDataObjectWithEmployee);

  return (
    <img
      alt={record.FullName}
      src={getUserImage({
        primKey: record.EmployeeRef,
        login: record.PersonID,
        hash: record.ImageHash,
        size: "md",
      })}
    />
  );
}

function ProfilePicture() {
  let record = useCurrentRow(dsMyDataObjectWithEmployee);

  return (
    <img
      alt={record.FullName}
      src={getUserImage(
        record.EmployeeRef,
        record.PersonID,
        record.ImageHash,
        "md"
      )}
    />
  );
}

API

export declare type ImageSize = "xs" | "sm" | "md" | "lg" | "xl";
export interface getUserImageOptions {
  /**
   * Prim key of the record in atbl_Personnel_Employees
   */
  primKey: string | null;
  /**
   * Person ID of the employee
   */
  login: string | null;
  /**
   * The value of the ImageHash column in atbl_Personnel_Employees
   */
  hash: string | number | null;
  /**
   * The image will be resized according to this value. Default is 'xs':
   * - xs: 64px
   * - sm: 128px
   * - md: 256px
   * - lg: 512px
   * - xl: image is not resized
   */
  size?: ImageSize;
}
/**
 * Returns the absolute path of a users profile picture. Uses the EmployeesLookup
 * data resource to enable caching across applications.
 *
 * If one of primKey or hash are not provided, or are null, an empty string will be returned.
 */
export declare function getUserImage(
  primKey: string | null,
  login: string | null,
  hash: string | number | null,
  size?: ImageSize
): string;
export declare function getUserImage(options: getUserImageOptions): string;