Example
This example uses a Twig template to provide the Html. The variables are passed to the Twig template and the rendering engine resolves them. At the end the rendered Html string is echoed to the screen.
index.php
<?php
use JobRouter\Sdk\Template\TwigRendererInterface;
use JobRouter\Sdk\UserManagerInterface;
use JobRouter\Sdk\PathsInterface;
return function (UserManagerInterface $userInterface, PathsInterface $pathsInterface, TwigRendererInterface $twigRenderer): void {
$twigRenderer->setTemplatePath('templates', __DIR__);
// Set a custom cache folder to easily make changes to the templates
$twigRenderer->setTemplateCachePath(
__DIR__ . DIRECTORY_SEPARATOR . 'templates' . DIRECTORY_SEPARATOR . 'cache',
);
// Define the variable context to use in the twig template
$templateVariables = [
'authorized' => [],
];
$user = $userInterface->getCurrentUser();
$templateVariables['authorized'] = [
'fullname' => $user->getFullName(),
'phone' => $user->getPhone(),
'email' => $user->getEmail(),
'language' => $user->getLanguage(),
'region' => $user->getTimezone(),
'avatarImage' => $pathsInterface->getJobRouterUrl() . '/' . $user->getAvatarUrl(),
'department' => $user->getDepartment(),
'groupMemberships' => $user->getJobFunctions(),
'supervisor' => $userInterface->getUserByUsername($user->getSupervisor())->getFullName(),
'active' => $user->isBlocked() ? 'No' : 'Yes'
];
// Render the given twig template with above defined context variables
$result = $twigRenderer->render('template.html.twig', $templateVariables);
// Output the complete rendered twig template with the context variables
echo $result;
};
template.html.twig
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Employee Profile</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 40px;
background-color: #eef1f5;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.profile-container {
width: 100%;
max-width: 600px;
background: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
display: flex;
align-items: flex-start;
}
.avatar-container {
flex: 0 0 150px;
text-align: center;
padding-right: 20px;
}
.avatar {
width: 120px;
height: 120px;
border-radius: 50%;
border: 3px solid #007bff;
}
.details {
flex: 1;
}
.section {
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #ddd;
}
.section:last-child {
border-bottom: none;
}
.section-title {
font-size: 18px;
font-weight: bold;
color: #007bff;
margin-bottom: 10px;
}
.info {
margin-bottom: 10px;
font-size: 16px;
color: #333;
display: flex;
}
.label {
font-weight: bold;
color: #007bff;
min-width: 150px;
}
.groups {
list-style-type: none;
padding: 0;
margin: 0;
}
.groups li {
background: #f8f9fa;
padding: 8px;
margin-top: 5px;
border-radius: 5px;
font-size: 14px;
}
</style>
</head>
<body>
<div class="profile-container">
<div class="avatar-container">
<img class="avatar" src="{{ authorized.avatarImage }}" alt="Profilbild">
</div>
<div class="details">
<div class="section">
<div class="section-title">Personal data</div>
<div class="info"><span class="label">Name:</span> <span>{{ authorized.fullName }}</span></div>
<div class="info"><span class="label">Language:</span> <span>{{ authorized.language }}</span></div>
<div class="info"><span class="label">Region:</span> <span>{{ authorized.region }}</span></div>
<div class="info"><span class="label">Department:</span> <span>{{ authorized.department }}</span></div>
<div class="info"><span class="label">Supervisor:</span> <span>{{ authorized.supervisor }}</span></div>
<div class="info">
<span class="label">Active:</span>
<span class="status">{{ authorized.active }}</span>
</div>
</div>
<div class="section">
<div class="section-title">Contact details</div>
<div class="info"><span class="label">Phone:</span> <span>{{ authorized.phone }}</span></div>
<div class="info"><span class="label">Email:</span> <span>{{ authorized.email }}</span></div>
</div>
<div class="section">
<div class="section-title">Group Memberships</div>
<ul class="groups">
{% for group in authorized.groupMemberships %}
<li>{{ group }}</li>
{% endfor %}
</ul>
</div>
</div>
</div>
</body>
</html>
Output
