Guide Index
Guides HomeMangoApps WebsiteCommunity & SupportBlog & Resources
MangoApps User Guide
MangoApps User Guide
  • 🥭MangoApps User Guide
  • 🗳️Ballots
    • Ballots Tools
  • 📆Calendar
    • Calendar Tools
    • Create an Event
    • Calendar Event Types
    • Reminders
    • Calendar Widget
  • 🗣️Campaigns
    • Campaign User Tools
    • Campaign Admin Tools
      • Create a New Campaign
      • Series Campaigns
      • Campaign Insights
  • 💬Chat
    • Chat Toolbars
  • 🏢Company
    • Company Toolbars - User
    • Company Toolbars - Admin
  • ✍️Compose
    • Team Messages
  • 👔Departments
    • Create a Department
    • Department Tools
    • Modules within Departments
  • ⬇️Downloads
  • 🆕Files
    • 🆕Files Toolbars
    • 🆕File Privacy and Sharing
    • File Viewer
      • Approval Workflow for Files
      • Video Insights
      • Video Transcript
    • Files FAQ
    • Files Widget
  • 👋Greetings
    • Greetings Toolbars
  • 🏗️Groups & Projects
    • Creating a Group/Project
    • Groups/Projects Module Tools
    • Modules within Groups/Projects
    • Workspace Toolbars
    • Workspace Quick Summaries
  • #️⃣Hashtags
    • Hashtags Tools
  • ⛑️Help Center
  • 🏠Home
    • Customize
  • 💡Ideas
    • Ideas Tools
    • Create an Idea
    • Contributors
    • Idea Campaigns
  • 🕹️Levels & Badges
    • Levels & Badges Tools
  • 📚Libraries
    • Libraries Tools
    • Add Items to a Library
    • Simple Links vs. Condition Based Links
    • Library Widget
  • 🎧Media Center
    • Media Center Tools
  • 📬Messages
    • Messages Tools
  • 🎙️My Recordings
    • My Recordings Module Toolbar
    • User Actions
  • 🆕News Feed
    • 🆕News Feed Tools
    • Share an Update
    • Comment Section
    • 🆕Newsfeed Settings
  • 🗒️Notes
    • Notes Tools
    • Notes Widget
  • 📃Pages
  • 🆕People Directory & Profiles
    • People Module Tools
    • 🆕User Profile
      • Edit Your User Profile
      • 🆕User Avatars
    • 🆕People Widget
  • 👍Polls
    • Polls Tools
  • 🆕Posts
    • Posts Module
    • Types of Posts
    • 🆕Compose a Post
      • Content Block Toolbar
      • Rich Text Editor (Blank Template)
      • Alerts
        • Creating an Alert
    • Boost a Post
    • Social Advocacy
    • Posts Widget
    • 🆕Published Posts Actions
      • 3-Dot Action Menu
      • 🆕View Insights
      • Post Tools
      • Reader Actions and Engagement
    • FAQ
  • 🧭Primary Navigation
  • ❓Questions
    • Questions Tools
  • 🏎️Quick Access
  • 🤔Quizzes
    • Quizzes Tools
  • 🏆Recognition
    • Reward Points and Redemptions
    • Recognition Widget
  • 👀RSS Reader
  • 🗓️Schedules
    • Schedule Toolbars
    • My Store Schedules
    • My Schedule
    • Availability
    • My Upcoming Shift Widget
  • 🔎Search
    • Search Tools
    • Advanced Search Operators
  • ⚙️Settings
    • Notifications
      • Notification Tools
    • News Feed
    • Smart Reminders
      • File Retention Reminders
    • Password
    • Timeout
    • To Do
    • Locale
    • Digests
    • Landing Page
    • Authorized Apps
    • Integrations
    • Appearance
    • Huddle
    • Voice
  • 📊Surveys
    • Survey Tools
    • Creating a Survey
    • Survey Recurrence
    • Survey Question Types
    • Rule Builder
    • Survey Insights
    • Surveys Widget
  • 🆕Tasks
    • 🆕Tasks Module Actions
    • Create a New Task
    • Task Progression
    • Milestones
    • Centralized Tasks
    • Tasks Widgets
  • 🤝Team CRM
  • 📋To-Do List
    • Create a To Do List
  • 🆕Trackers
    • Tracker Module Menu
    • Create a Tracker
    • 🆕Tracker Column Types
    • 🆕Mask Field
      • 🆕Example Mask Widget
    • Navigating a Tracker
      • Tracker Menus
      • Table Menus
      • Column Menus
      • Entry Menu
    • Data Uploader
    • Adding a New Table View
    • 🆕Tracker Workflows
      • 🆕Creating a Tracker Workflow
        • Approval Workflow
        • 🆕Form Workflow
        • Publish Workflow
        • 🆕Task Workflow
    • 🆕Forms
      • Create a Form
      • 🆕Edit a Form
      • Form Tools
      • Form Rule Builder
    • Trackers and Forms Widget
      • Tracker Widget View Type
    • 🆕Tracker Use Cases
      • 🆕Welcome Video and Acknowledgement
  • 🆕Widget Gallery
    • My Priority Items Widget
    • 🆕My Reporting Hierarchy Widget
    • Pending Approvals Widget
    • Quick Links Widget
    • Slider Widget
    • Text Box Widgets
    • 🆕Upcoming Birthdays Widget
    • 🆕User Profile Card
  • 📄Wikis
    • Wiki Tools
    • Create a Wiki
    • Collaborating on Wikis
  • ADDITIONAL RESOURCES
    • Troubleshooting Guide
      • Supported Platforms and Browsers
    • Submit a Support Ticket
    • Release Notes
Powered by GitBook
On this page
  • Overview
  • Filtering the Data for Logged-in Users
  • Publishing the Widget
  • HTML Template with Dynamic Fields
  1. Trackers
  2. Mask Field

Example Mask Widget

PreviousMask FieldNextNavigating a Tracker

Last updated 21 days ago

Overview

For this example, we will be creating a Locker & Badge Assignment Widget, designed to display personalized locker and badge details for each user configured in the associated tracker. It combines HTML formatting with dynamic field variables and conditional display logic to ensure only the correct user sees their information.

This example assumes that a Tracker is already populated with Locker and Badge Assignments, as well as other user information.


Filtering the Data for Logged-in Users

With this table configuration, if Stella, our example user, is the logged-in user, she will only see her own locker and badge assignment.


Publishing the Widget


HTML Template with Dynamic Fields

Use the following HTML snippet to structure your widget. This includes dynamic variables and the %{decrypt} function to securely display encrypted fields such as badge_id and locker_code.

  <header>
   <div style="height:7px;">
      &nbsp;
   </div>
</header>
<loop>
   <div>
      <div class="ms-flex bottom-10" style='justify-content: space-between; align-items: center; box-sizing: border-box; width:100%; padding:1px 10px;'>
         <span class="ma-h5" style='flex: 0 0 auto; color:#3071A9;'>
         My Location
         </span>
         <div style="flex: 1 1 auto; text-align: center; padding:0 15px;">
            <span style="border-top: 1px solid #D7D7D7; display: block; width: 100%;"></span>
         </div>
         <span class="ma-h5" style='flex: 0 0 auto; color:#3071A9;'>
         %{location}
         </span> 
      </div>
      <div class="ms-flex bottom-10" style='justify-content: space-between; align-items: center; box-sizing: border-box; width:100%; padding:1px 10px;'>
         <span class="ma-h5" style='flex: 0 0 auto; color:#3071A9;'>
         Badge ID
         </span>
         <div style="flex: 1 1 auto; text-align: center; padding:0 15px;">
            <span style="border-top: 1px solid #D7D7D7; display: block; width: 100%;"></span>
         </div>
         <span class="ma-h5" style='flex: 0 0 auto; color:#3071A9;'>
         %{decrypt(badge_id)}
         </span> 
      </div>
      <div class="ms-flex bottom-10" style='justify-content: space-between; align-items: center; box-sizing: border-box; width:100%; padding:1px 10px;'>
         <span class="ma-h5" style='flex: 0 0 auto; color:#3071A9;'>
         Locker Number
         </span>
         <div style="flex: 1 1 auto; text-align: center; padding:0 15px;">
            <span style="border-top: 1px solid #D7D7D7; display: block; width: 100%;"></span>
         </div>
         <span class="ma-h5" style='flex: 0 0 auto; color:#3071A9;'>
         %{locker_number}
         </span> 
      </div>
     
      <div class="ms-flex" style='justify-content: space-between; align-items: center; box-sizing: border-box; width:100%; padding:1px 10px;'>
         <span class="ma-h5" style='flex: 0 0 auto; color:#3071A9;'>
         Locker Code
         </span>
         <div style="flex: 1 1 auto; text-align: center; padding:0 15px;">
            <span style="border-top: 1px solid #D7D7D7; display: block; width: 100%;"></span>
         </div>
         <span class="ma-h5" style='flex: 0 0 auto; color:#3071A9;'>
         %{decrypt(locker_code)}
         </span> 
      </div>
   </div>
</loop>

The widget will now dynamically reflect the user's information upon log in, as long as they have an entry in the tracker. If there is no information for the logged in user, the widget will be blank.

To make sure each logged in user only sees their own details, we will configure a column for our Employee column.

We will now create a filtering the tracker information so it only shows data for the currently logged-in user.

Once configured, so it can be easily reused or added to relevant dashboards.

Add the widget to a dashboard or newsfeed and .

🆕
🆕
🆕
User Look Ahead
Table
add this filtered table as a widget to the Widget Gallery
set the widget view to Card (HTML Base)