Using Sandbox module of the Resource Center
Hi all,
We want to implement a custom-created Resource Center. Essentially, we’re aiming to create a checklist that allows us to track the tasks our clients have accomplished, functioning more like a roadmap. It looks something like this:
I’m wondering if anyone has implemented something similar before? I tried to set it up, but it seems the data isn’t being saved. When the client moves to a different window and then returns, all the checkboxes that were selected are refreshed and unchecked again.
Below is the code i created.
Could someone please review this and provide feedback on whether it's possible to persist checkbox data in this setup?
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-Do List</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="todo-container">
<h1>FP&A Value Roadmapping</h1>
<ul id="todo-list">
<li class="todo-header">
<span>Task</span>
<span>Tentative Date</span>
</li>
<li>
<input type="checkbox" id="dashboard" class="todo-checkbox">
<label for="dashboard">Dashboard</label>
<span class="todo-date"></span>
</li>
<li>
<input type="checkbox" id="cashflow" class="todo-checkbox">
<label for="cashflow">Cashflow Statement</label>
<span class="todo-date"></span>
</li>
<li>
<input type="checkbox" id="personnel" class="todo-checkbox">
<label for="personnel">Personnel Planning</label>
<span class="todo-date"></span>
</li>
</ul>
<div class="add-item-container">
<input type="text" id="new-item-input" placeholder="Add new item..." />
<input type="date" id="new-item-date">
<button id="add-item-button">Add</button>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.todo-container {
background-color: white;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 400px;
}
h1 {
text-align: center;
margin-bottom: 20px;
font-size: 24px;
}
ul {
list-style-type: none;
padding: 0;
margin-bottom: 20px;
}
li {
margin-bottom: 15px;
display: flex;
align-items: center;
justify-content: space-between;
}
.todo-header {
font-weight: bold;
border-bottom: 1px solid #ccc;
padding-bottom: 10px;
margin-bottom: 10px;
}
.todo-checkbox {
margin-right: 10px;
}
label {
font-size: 18px;
flex-grow: 1;
}
.todo-date {
font-size: 14px;
color: #555;
margin-left: 10px;
}
.add-item-container {
display: flex;
justify-content: space-between;
align-items: center;
}
#new-item-input {
width: 50%;
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
JS
document.addEventListener('DOMContentLoaded', () => {
const checkboxes = document.querySelectorAll('.todo-checkbox');
const todoList = document.getElementById('todo-list');
const newItemInput = document.getElementById('new-item-input');
const newItemDate = document.getElementById('new-item-date');
const addItemButton = document.getElementById('add-item-button');
// Function to handle checkbox change
function handleCheckboxChange(event) {
const checkbox = event.target;
const label = checkbox.nextElementSibling;
if (checkbox.checked) {
label.style.textDecoration = "line-through";
label.style.color = "#999";
} else {
label.style.textDecoration = "none";
label.style.color = "#000";
}
}
// Function to format date
function formatDate(dateString) {
const options = { month: 'short', day: 'numeric', year: '2-digit' };
const date = new Date(dateString);
return date.toLocaleDateString('en-US', options);
}
// Add event listeners to existing checkboxes
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', handleCheckboxChange);
});
// Add new item to the list
addItemButton.addEventListener('click', () => {
const newItemText = newItemInput.value.trim();
const newItemStartDate = newItemDate.value;
if (newItemText !== "") {
// Create a new list item
const li = document.createElement('li');
const checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.className = 'todo-checkbox';
const label = document.createElement('label');
label.textContent = newItemText;
const dateSpan = document.createElement('span');
dateSpan.className = 'todo-date';
if (newItemStartDate) {
dateSpan.textContent = formatDate(newItemStartDate);
}
// Append the checkbox, label, and date span to the list item
li.appendChild(checkbox);
li.appendChild(label);
li.appendChild(dateSpan);
todoList.appendChild(li);
// Clear the input fields
newItemInput.value = '';
newItemDate.value = '';
// Add event listener to the new checkbox
checkbox.addEventListener('change', handleCheckboxChange);
}
});
// Allow pressing Enter to add the item
newItemInput.addEventListener('keypress', (event) => {
if (event.key === 'Enter') {
addItemButton.click();
}
});
});
Thanks for the help!
-Aakash
0
コメント
Hi Aakash Jhaveri, You will have to save the task status as metadata in pendo then only it will persist across pages, Have implemented it in a different style.
Rohit Pandey yes, that’s what we’re planning to do. Have you done that using the Sandbox module? If so, could you tell me what needs to change in my code and how I can save it in the metadata?
Hi Aakash Jhaveri I have done it using a guide codeblock, as the amount of space is really limited based on how wide your RC is opening using sandbox is not recommended.
Apart from that you can review the official API doc for updating and reading metadata which you can add to you code to achieve this.
サインインしてコメントを残してください。