SAP Knowledge Base Article - Public

2365160 - How to Insert an Image on a Custom Panel in Onboarding

Symptom

How to insert an image on a custom Panel?

Environment

SAP SuccessFactors Onboarding

Resolution

OPTION ONE (1): via Logo Collection

Upload Image in Logo Collection

  1. Navigate to SAP SuccessFactors > Onboarding > Settings > Logo Collection
  2. Click the New button to add image in the Logo library, afterwards a pop-up window will be shown to select an image in your Desktop
  3. Enter the details needed and below description to assist uploading image; Once done click Submit to upload
  • Name - Title of the image
  • Type - Category of the image; dimension and file type of the image to upload
    • Dashboard - Used for *** to be updated

      Dimension: 183px X 59px
      File Type: GIF

    • Wizard - Used for custom Panels

      Dimension: 183px X 59px
      File Type: GIF

    • Notification - Used for Notification templates

      Dimension: Free Size
      File Type: JPEG, GIF, PNG. etc...

    • FormTitle - Used for *** to be updated

      Dimension: Free Size
      File Type: JPEG

    • FormSign -  Used for *** to be updated

      Dimension: 90px X 30px
      File Type: GIF

  • Default - *** to be updated
  • Picture - Selection to add image to the system

    screenshot0012_ 12052018071056.png

 

Copy Image Address

  1. In Logo Collection page, select the image to be inserted on a custom Panel
  2. Uploaded image will show in the right section, hover mouse cursor and right-click

    screenshot0014_ 12052018071120.png

  3. Select Copy Image Address (Google Chrome), Copy Image Location (Mozilla Firefox), and IE does not have direct way to copy image link

 

Insert Uploaded Image on a Custom Panel

  1. Navigate to SAP SuccessFactors > Onboarding > Settings > Panels
  2. Locate the Process, Step, and Panel to insert the image
  3. Create a Label property and select Rich Text Editor as type

    screenshot0015_ 12052018071816.png
    screenshot0016_ 12052018071831.png

  4. Click the Title... hyperlink and a pop-up window will show to add the image

    screenshot0017_ 12052018071846.png
    screenshot0018_ 12052018071849.png

  5. Click Source button to add a code snippet, add the line below

    <img alt="YYYY" src="XXXX">

    alt - Alternate
    src - Source

    screenshot0020_ 12052018071934.png

  6. Replace XXXX with the image link in Logo Collection or the link hosted in SAP SuccessFactors public directory,
    (see reminder) and YYYY as an alternate text if image is not show properly

    screenshot0021_ 12052018071956.png

  7. Click Save to add Rich Text in the Label property

    screenshot0022_ 12052018072000.png

  8. Click Save in both Label Property and Panel to reflect the changes

    screenshot0023_ 12052018072004.png

  9. Try and test

 

OPTION TWO (2): via Image Hosting in SAP SuccessFactors Public Directory

Contact SAP SuccessFactors Cloud Product Support

Please reach out to SAP SuccessFactors Cloud Product Support in SAP One Support Launchpad via,
 Support Incident and
request to host image in SAP SuccessFactors Public SFTP;
see KBA 2157471 for more details.

Once the file is uploaded in SAP SuccessFactors Public SFTP, support will provide you a hyperlink.
Please follow the steps mentioned above on how to insert uploaded image on a custom panel.

See Also

Help the Knowledge Base Community

  • Any feedback with this KBA? Please rate this article 1 star is the lowest and 5 is the highest, you may also add constructive feedback to help improve our KBAs.
  • Have a concern with this KBA or found dead links? Please reach out to SAP SuccessFactors Cloud Product Support in SAP One Support Launchpad via SAP Expert Chat or Support Incident and we are ready to assist you. Kindly provide the following information.
    • KBA Article being reported
    • The concern with the KBA

Keywords

Panel, Panels, Image, Picture  , KBA , LOD-SF-OBD-PAN , Panels, Panel Designer , How To

Product

SAP SuccessFactors Onboarding all versions