DEV Community

Cover image for Building Skill Align - Part 7 - Project Staffing Assistant(Frontend)
Rubasri Srikanthan
Rubasri Srikanthan

Posted on

Building Skill Align - Part 7 - Project Staffing Assistant(Frontend)

#salesforce #sideprojects #ui #lwc

In the previous part of this series, I built the backend logic that evaluates employees against project skill requirements and calculates a gap score.

With the backend logic in place, the next step was to design a frontend experience that helps managers interpret those results effectively.

Building the UI from an initial version to an improved dashboard

If you look at the first version of the Project Assistant UI, it displayed the data correctly, but the interface itself was quite plain and number-heavy.

First version of Project Assistant UI

Managers would have had to interpret a lot of raw information before making decisions.

That made me realize something important:

A decision-support system should not just display data — it should help users understand what the data means.

So I redesigned the interface to make the information more actionable and easier to interpret for project managers.

The Goal of the Frontend

The Project Staffing Assistant needed to answer three important questions for project managers:

  1. Which employees are the best candidates for this project?

  2. How risky is assigning this employee based on skill gaps?

  3. Which specific skills contribute to that risk?

To support this workflow, I built a Project Staffing Overview dashboard.

Project Staffing Assistant

Each employee is displayed as a candidate card containing key information. This layout allows managers to quickly evaluate candidates and assign them to the project.

Employee candidate cards showing skill match scores, risk indicators, and assignment options for project staffing.

Limiting Results with Top Candidate Selection

In my initial implementation, I hardcoded the system to return Top 5 candidates from the backend. At that stage, my focus was primarily on displaying the detailed skill breakdown.

My plan was to finish the core feature first and improve usability later.

However, while testing with a larger employee dataset, I realized that limiting results to a fixed number could restrict flexibility for project managers.

It required only:

  • a minor backend adjustment

  • a small UI enhancement

So I introduced a Top Candidate selector in UI.

Managers can now choose how many candidates they want to evaluate.

LWC Implementation

HTML 

<lightning-combobox
    label="Top Candidates"
    value={topN}
    options={topOptions}
    onchange={handleTopChange}>
</lightning-combobox>
Enter fullscreen mode Exit fullscreen mode

JS 

topOptions = [
 { label: 'Top 5', value: '5' },
 { label: 'Top 10', value: '10' },
 { label: 'Top 20', value: '20' },
 { label: 'Top 30', value: '30' }
];

handleTopChange(event) {
    this.topN = event.detail.value;
    // call backend to fetch employees
}
Enter fullscreen mode Exit fullscreen mode

Top Candidate Selector

Handling Assigned and Recommended Candidates

Initially, my approach was simple: return the Top N candidates for a project.

But after implementing the assignment functionality, I noticed an important usability issue.

If candidates from the Top N list get assigned, the system should ideally bring in the next eligible candidates so that managers still have enough options to choose from.

At the same time, managers should also have visibility into which candidates are already assigned.

Example:

Top 5 Candidates

A (Assigned)
B (Assigned)
C
D
E
Enter fullscreen mode Exit fullscreen mode

In this scenario, managers effectively have only three new candidates to consider.

To solve this, I decided to return both:

  • Assigned candidates

  • Eligible new candidates

This ensures managers always see both current assignments and fresh recommendations, maintaining enough options when staffing the project.

Backend Support

To enable this behavior, I added a flag to the evaluation results.

@AuraEnabled public Boolean hasActiveAssignment;
Enter fullscreen mode Exit fullscreen mode

During evaluation, Apex checks whether an employee is already assigned to the selected project.

candidate.hasActiveAssignment = activeAssignments.containsKey(
    buildProjectEmployeeKey(projectId, employeeId)
);
Enter fullscreen mode Exit fullscreen mode

Candidate list showing assigned employees and recommended candidates.

This flag allows the frontend to clearly distinguish between employees who are already assigned and new recommended candidates, giving managers better visibility while making staffing decisions.

Future Enhancement

As the dataset grows, I plan to introduce pagination, which will allow managers to navigate larger candidate lists more efficiently.

Risk-Based Evaluation

Initially, the backend returned a gap score, but raw numbers were not very intuitive for reviewing candidates.

So I introduced a new metric: Required Skills Risk

Example:

Required Skills Risk → 52% (Medium)
Enter fullscreen mode Exit fullscreen mode

This metric focuses specifically on required project skills, giving managers a clearer picture of potential delivery risk when assigning an employee.

How Required Skills Risk is Calculated

The Required Skills Risk represents the delivery risk caused by gaps in required project skills.

Required Risk % = (Total Required Impact / 
                   Maximum Possible Required Impact) × 100
Enter fullscreen mode Exit fullscreen mode
  • Total Required Impact → Sum of the impact values for all required skill gaps.
  • Maximum Possible Required Impact → The worst-case impact if an employee had no proficiency in any required skill.

To maintain transparency for managers, I also added a tooltip explaining the calculation.

HTML 

<lightning-helptext
 content={riskHelpText}>
</lightning-helptext>
Enter fullscreen mode Exit fullscreen mode

Required Skills percentage help text

Total Gap Help Text

Risk help text for Risk column

Expandable Skill Breakdown

High-level metrics are useful, but sometimes managers need deeper insight before making an assignment decision.

To support this, I added an expandable skill breakdown.

When expanded, the dashboard displays detailed skill gap information. This allows managers to quickly understand why a candidate has a certain risk score.

Detailed Skill Gap

Toggle Implementation LWC

HTML 

<lightning-button
 label={toggleLabel}
 onclick={toggleSkills}>
</lightning-button>

<template if:true={showSkills}>
   <!-- Skill breakdown table -->
</template>
Enter fullscreen mode Exit fullscreen mode

JS 

showSkills = false;

get toggleLabel() {
 return this.showSkills ? 'Hide Risk Breakdown' : 'View Risk Breakdown';
}

toggleSkills() {
 this.showSkills = !this.showSkills;
}
Enter fullscreen mode Exit fullscreen mode

This keeps the primary view simple, while still allowing detailed inspection on demand.

Skill Metadata with Informational Pills

Each skill row also displays contextual indicators that help managers interpret the data quickly.

Skill metadata pills showing importance, weight, and source.

HTML 

<lightning-pill label={skill.importance}></lightning-pill>
<lightning-pill label={'Weight ' + skill.weight}></lightning-pill>
<lightning-pill label={skill.source}></lightning-pill>
Enter fullscreen mode Exit fullscreen mode

Skill-Level Risk Visualization

Instead of simply listing missing skills, the UI highlights risk contribution for each skill.

This logic is calculated in Apex using the impact value, which combines:

  • skill deficit
  • skill importance
  • skill weight

Example:

SOQL → 80% (High Risk)
LWC → 40% (Medium Risk)
OmniStudio → 10% (Low Risk)
Enter fullscreen mode Exit fullscreen mode

Risk Bucket UI

HTML 

<lightning-badge label={skill.riskBand}></lightning-badge>
Enter fullscreen mode Exit fullscreen mode

Each skill is categorized into a risk band:

  • High
  • Medium
  • Low
  • None

This makes it easy for managers to quickly identify which skills contribute most to delivery risk.

Readiness Indicator LWC

Each candidate card also includes a Project Readiness badge.

Employees are classified as:

Ready – Required skills sufficiently met

Not Ready – Significant skill gaps remain

HTML 

<lightning-badge label={employee.readiness}></lightning-badge>
Enter fullscreen mode Exit fullscreen mode

Assignment Action

Managers can assign employees directly from the dashboard.

HTML 

<lightning-button
 label={employee.assigned ? 'Assigned' : 'Assign'}
 variant="brand"
 disabled={employee.assigned}
 onclick={assignEmployee}>
</lightning-button>
Enter fullscreen mode Exit fullscreen mode

If an employee is already assigned, the button is automatically disabled. This prevents duplicate assignments and keeps the workflow simple.

Styling

For styling, I used SLDS (Salesforce Lightning Design System) along with custom CSS where necessary.

Final Thoughts

Building the Project Staffing Assistant taught me an important lesson:

A system is not only about correct logic.

It is also about presenting information in a way that helps people understand, trust, and act on it effectively.

Glossary

LWC (Lightning Web Components)

A modern JavaScript framework used in Salesforce to build fast and reusable UI components.

SLDS (Salesforce Lightning Design System)

A design framework that provides prebuilt styles and components for building consistent Salesforce user interfaces.

Top comments (0)