The Matrix Lightning Web Component

The Matrix lightning web component interface makes it easy to enter and manage data quickly and efficiently. Similar to a spreadsheet, you can select cells, navigate using your keyboard, and enter or update values directly. You can also copy and paste data, highlight ranges, and use the drag handle to fill adjacent cells with just a few clicks. The intuitive design allows you to work faster and more accurately, even when handling large amounts of data.

Prerequisite: Lightning Web Security

The Matrix lightning web component requires that administrators have enabled Lightning Web Security in their environments. For details, view the following Salesforce Help support document: Lightning Web Security.

Using the Matrix

  • Select a cell by clicking it with your mouse or navigating to it using the arrow keys.
  • Begin typing to overwrite the existing value or double-click to edit the current value directly.
  • Press Enter to move to the cell below or Shift + Enter to move to the cell above.
  • Use Tab to move to the next cell to the right and Shift + Tab to move to the cell to the left.

Highlighting and Selecting

  • Click and drag your mouse to highlight a range of contiguous cells.
  • Non-contiguous ranges cannot be selected.

Drag to Fill

  • Use the handle at the bottom-right corner of a selected cell or range to drag and fill adjacent cells.
  • The dragged cells will replicate the original value (it does not apply a pattern or sequence).

Copy and Paste

  • Use standard keyboard shortcuts (Ctrl + C / Cmd + C to copy, Ctrl + V / Cmd + V to paste).
  • When pasting, the data will adjust to fit the selected area if there is enough space.
  • If the paste operation exceeds the available space (e.g., pasting 4 rows into a space with only 2 available rows), the data will be truncated.

Saving

When you make changes in the matrix, you’ll see a “You have unsaved changes” message in red at the top of the matrix. To save your changes:

  • Click the Save button (floppy disk icon) in the top-right corner of the matrix.
  • Once saved, the “You have unsaved changes” message will disappear.

How Data is Saved in Salesforce

The way data is saved depends on the selected View By setting:

View BySaving Behavior
Day or Time TrackingData is saved exactly as entered. If you enter 4 for a specific date and assignment, it will save 4 hours for that date.
Week or MonthData is distributed based on the work week settings.
For example, if you enter 20 in the week view and your work week is set to 5 days (Monday to Friday), the matrix will split the 20 hours into 4 hours per day.

Date Navigation

The Matrix uses date navigation controls that allow the user to choose a time range, change the level of detail (day, week, month), and anchor the view on key dates from the parent record.

Within the Matrix, the currently selected cell serves as the focused date when switching between views or time ranges.

For example, if a cell in May is selected and you switch to Day view, the matrix shifts to show the days of May.

Similarly, if you have a cell selected in June within the 2nd Quarter and switch to Next 3 Months, the view starts at June and shows the following three months.

For details on date navigation, see the Date Navigation Controls support post.

Adding the Matrix to a Lightning Page

You can easily add the Resource Hero Matrix component to any Lightning page:

  1. Go to SetupUser InterfaceLightning App Builder.
  2. Open the Lightning page where you want to add the Matrix, or create a new page.
  3. From the Components panel, search for RH Matrix and drag it onto the desired section of the page.
  4. Use the settings panel on the right side to adjust the available options. (See the table below for a list of available settings.)
  5. Save your changes and activate the page if needed.

Configuration Options

The following properties are available when configuring the LWC matrix:

NameDescriptionAvailable ValuesDefault
Header LabelThe label that appears at the top of the matrix.Any textResource Hero Matrix
Matrix TypeDetermines how the matrix behaves and what data is displayed.

For details, view the RH Matrix: The Matrix Type Setting support page.
Single Record
RH Dashboard Standalone
Standalone
Default ViewBy / Time RangeSets the default time view and range.Single Week

Day – Current Month
Day – Last 7 Days
Day – Last 14 Days
Day – Next 7 Days
Day – Next 14 Days

Week – Current Quarter
Week – 1st Quarter
Week – 2nd Quarter
Week – 3rd Quarter
Week – 4th Quarter
Week – Next 3 Months
Week – Next 6 Months
Week – 1st Half
Week – 2nd Half

Month – Next 12 Months
Month – Entire Year
Week – Next 3 Months
Matrix Enabled FieldControls which numeric field data is being manipulated by the matrix.Forecast
Actual

More information about configuring additional numeric fields to work with the RH Matrix can be found on the Create a matrix on fields other than Forecast and Actual support page.
Forecast
Matrix Enabled FieldsManually sets which fields are enabled in the matrix.Comma-separated list of Resource Forecast field api names.

For example:

ResourceHeroApp__Forecast__c,ResourceHeroApp__Actual__c
None
Sort By FieldField used to sort matrix rows.Any field from Resource Assignment objectresourceheroapp__assigned_to__c
Sort By OrderSort order for the matrix rows.ASC
DESC
ASC
Assignment Exclusion FieldField used to exclude records from the matrix.

More information can be found on the Assignment Exclusion Field support page.
Any checkbox / boolean field from Resource Assignment objectNone
Resource Assignment Field Set NameControls which row header fields will be displayed within the Matrix.

Any field set from the Resource Assignment object can be specified.

For more information on creating field sets for use within the matrix, see the RH Matrix: Custom Field Set support post.

If left plank, default fields from the RHA Matrix Fields custom setting will be use.
Any field set from Resource Assignment objectNone
Component Max HeightMaximum height of the component in pixels.

Once this limit is reached, scrollbars will appear.
Integer300
Notes PanelDetermines the default state of the Notes panel for Day and Single Week views.Default Open
Default Closed
Hidden
Default Closed
Show Grand Total RowShows or hides the grand total row at the bottom of the matrix.True
False
True
Read OnlyMakes the matrix read-only.True
False
False
Lock View ByWhen checked, end users cannot change the View By selector at runtime. The selector appears disabled with a label explaining the locked state, and the locked value comes from the Default ViewBy / Time Range property.True
False
False

Experience Cloud Specific Configuration Options

In addition to the above, the following configuration options are available within Experience Cloud:

NameDescriptionAvailable ValuesDefault
Record IdWhen Matrix Type is Single Record (you are adding this component to an experience cloud record detail page), enter {!recordId} in this field.

When Matrix Type is Standalone or RH Dashboard, leave this field blank.
blank
{!recordId}
blank
Object API NameWhen Matrix Type is Single Record (you are adding this component to an experience cloud record detail page), enter {!objectApiName} in this field.

When Matrix Type is Standalone or RH Dashboard, leave this field blank.
blank
{!objectApiName}
blank

Permissions and Access

  • The LWC Matrix follows the same permissions and field-level security as the Visualforce version.
  • To ensure proper access, make sure that users have read and edit permissions for the relevant objects and fields. If a user does not have access to a field or object, the matrix will respect those security settings and prevent data entry or visibility accordingly.

Ready to get started?

Schedule a call to see if Resource Hero is right for you

Book now