A Guide to Creating Custom Cards for Successfactors Learning

[nishadsthakur]

What are Custom Cards in SuccessFactors Learning?

Custom cards in SuccessFactors Learning are a flexible way to present information, actions, or reminders directly on the learner’s homepage. These cards can be tailored to display various types of content, such as upcoming courses, certifications, announcements, or personalized messages. By leveraging custom cards, organizations can enhance the user experience, ensure important information is easily accessible, and drive engagement with the learning platform.

Why Use Custom Cards?

1. Personalization: Custom cards can be tailored to individual learners based on their role, department, or learning history, creating a more personalized and relevant experience.
2. Increased Engagement: By highlighting important courses or reminders, custom cards help keep learning top-of-mind for employees, increasing participation and completion rates.
3. Ease of Access: Important information is placed directly in front of the learner, reducing the time spent searching for relevant content.
4. Branding and Communication: Custom cards can be designed to align with your organization’s branding, making the learning platform feel more cohesive and part of the broader company culture.

Technical Specification

All custom cards contain an image. You need to have access to an image that meets the following criteria:

File type of JPEG or PNG with ideal 16:9 aspect ratio and below 2 MB

You need the Company System and Logo Settings Role-Based Permission.

Admin can create 100 Custom cards and People can see up to 8 cards, based on the current date, status of the card, and their organization or user group.

Cards have 2 behaviours

1) Link

• Internal/External URL
• Email
• Javascrript URL

2) Dialog

• Embedding HTML
• Embedding a video file
• Embedding an iFrame
• Using a rich text editor to format text, insert multiple links and images, incorporate partner integrations, and preview or print your content

The top eight active cards display to users on the new Learning home page, based on these conditions:

• Visibility - The Target Group for the card is "All Active Users", or the user belongs to one of the specified organizations or user groups.
• Date - The Active Period for the card is "Always", or the current date falls within the specified range.
• Card Status - The card is enabled.

Creating the Custom Cards

1)Creating Links

Go to Learning Administration  System Administration  Application Administration  Custom Cards and choose Add Card.

Add card name and Description in General Tab (this will only display to Admins)

In Card tab – Add title, Subtitle, and image

In Interaction for Links select URL,Email or Javascript URL (Below is example of URL)

Now Select visibility as Target group (it can be All users,user group or Organization group) and Activity Period(can be time bound)

2) Creating Dialogs

Same steps need to follow for creating Dialogs till step 3

In Interaction for Links select Dialog  (Below is example of Raw HTML)

Similar to Links you can choose the visibility

Once Configured you can view the Custom Cards on New Learning Page

Here are the Pop up page when click on the cards (Links will redirects to particular URL or Email id)

Dialog- Here is an example of Raw HTML pop up where you can add your Learning team contact details for easier access(Code down below)

There are 3 pre defined templates by SAP in dialog as well as video file support along with iframe support.

Also you can use the legacy tiles from old learning page using the reports.to download the report you can follow the steps given here

Best Practices for Custom Cards

• Keep it Simple: Ensure the information on the card is clear and concise. Overloading the card with too much information can overwhelm users.
• Use Visuals: Incorporate relevant images or icons to make the card visually appealing and easier to understand at a glance.
• Regular Updates: Regularly update the cards to keep the content fresh and aligned with current learning priorities.
• Test with Users: Before rolling out a new card to the entire organization, test it with a small group of users to gather feedback and make any necessary adjustments.

Conclusion

Custom cards in SAP SuccessFactors Learning are a powerful tool to enhance the learning experience for your employees. By leveraging these cards, you can create a more personalized, engaging, and efficient learning environment. Start experimenting with custom cards today to see how they can benefit your organization.

For more detailed instructions and examples, refer to the official SAP SuccessFactors Learning documentation on custom cards.

/*Sample Code for above example*/

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Portrait Photos with Emails</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }
        .container {
            display: flex;
            gap: 75px; /* Increased gap for more spacing */
        }
        .profile {
            text-align: center;
        }
        .profile img {
            width: 150px;
            height: 150px;
            border-radius: 50%;
            object-fit: cover;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            margin-bottom: 10px;
        }
        .profile p {
            margin: 5px 0;
            font-size: 14px;
            color: #333;
        }
        .profile a {
            color: #333;
            text-decoration: none;
        }
        .profile a:hover {
            text-decoration: underline;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="profile">
            <img src=" image_1_reference " alt="Portrait 1">
            <p><strong>Jane Doe</strong></p>
            <p>Learning Head</p>
            <p><a href="mailto:email1@example.com">email1@example.com</a></p>
        </div>
        <div class="profile">
            <img src=" image_2_reference " alt="Portrait 2">
            <p><strong>John Smith</strong></p>
            <p>Product Manager</p>
            <p><a href="mailto:email2@example.com">email2@example.com</a></p>
        </div>
        <div class="profile">
            <img src="image_3_reference" alt="Portrait 3">
            <p><strong>Emily Johnson</strong></p>
            <p>Adminr</p>
            <p><a href="mailto:email3@example.com">email3@example.com</a></p>
        </div>
    </div>
</body>
</html>

[VeljkoRoskar]

The current inability to display select custom cards only on custom pages makes the ILX home page very cluttered. 

[Kiran113]

Is the learning custom cards available on mobile application