Global Search, defined by user

Ask the Community Get Answers
1

I m looking to improve this code, i need this only to diplay when the user.role is admin.

i m using the next gen and my code does not work anyone know what i m doing wrong.

// === Global Floating Search Bar (Visible only to ‘Staff’ role) ===
// — MODIFICATION: Added ‘async’ to use ‘await’ —
Knack.ready(async () => {
// — MODIFICATION: Added user and role check —
let user = null;
try {
user = await Knack.getUser();
console.log(“[Knack JS] Logged user:”, user);
} catch (e) {
console.warn(“[Knack JS] Could not get user:”, e);
}

// — MODIFICATION: Check for ‘Staff’ role. (You can change “Staff” to any role)
if (!user || !user.roles || !user.roles.includes(“Admin”)) {
console.log(“:locked: Floating search bar hidden (public or non-staff user).”);
return; // ← Exit script if user is not Staff
}

// — All code below this line only runs if user is ‘Staff’ —

// Create wrapper element
const searchBar = document.createElement(“div”);
searchBar.innerHTML = <div id="rb-floating-search" title="Global Student Search"> <form id="rb-search-form"> <input type="text" id="rb-search-input" placeholder="Search students..."> <button type="submit" aria-label="Search">🔍</button> </form> </div> ;

// Style and positioning
const style = document.createElement(“style”);
style.textContent = `
#rb-floating-search {
position: fixed;
top: 12px;
right: 18px;
z-index: 9999;
background-color: #0e7490;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.25);
padding: 4px 8px;
display: flex;
align-items: center;
transition: all 0.3s ease;
}

#rb-floating-search:hover {
  box-shadow: 0 0 10px rgba(14,116,144,0.5);
}

#rb-search-form {
  display: flex;
  align-items: center;
  gap: 6px;
}

#rb-search-input {
  padding: 6px 8px;
  border: none;
  border-radius: 4px;
  outline: none;
  font-size: 14px;
  width: 160px;
  transition: width 0.25s ease;
}

#rb-search-input:focus {
  width: 220px;
  box-shadow: 0 0 6px rgba(255,255,255,0.5);
}

#rb-search-form button {
  background-color: white;
  color: #0e7490;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  padding: 6px 8px;
  font-size: 14px;
  transition: background-color 0.2s ease;
}

#rb-search-form button:hover {
  background-color: #d9f2f7;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  #rb-floating-search {
    top: 10px;
    right: 10px;
    padding: 3px 6px;
  }
  #rb-search-input {
    width: 120px;
  }
}

`;
document.head.appendChild(style);

// Attach bar to body so it persists globally
document.body.appendChild(searchBar);

// Handle form submission
const form = document.getElementById(“rb-search-form”);
form.addEventListener(“submit”, (e) => {
e.preventDefault();
const query = encodeURIComponent(
document.getElementById(“rb-search-input”).value.trim()
);
if (query) {
window.location.href = /students/edit-student?view_115_search=${query};
}
});

console.log(“:white_check_mark: Floating search bar loaded for Staff user.”);
});