> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.2cloudnine.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Customisable Community Components (Utilities) - Administrator Guide

## Purpose

The purpose of this Administrator Guide is to provide information about Utilities packaged Customisable
Community Components. The content in this guide is optional and may be utilised during
implementation or after a project has gone live. The intended audience for this document is System
Administrators.

## Overview

The Customisable Community Components provide greater flexibility for customising the Employee
Timesheet and Approver Community Components. By leveraging these components within the Utilities
Package, customers can display data not currently available in the standard 2cloudnine Product. The
functionality of Time Entry for Allowances is only supported for Guest User Approvers. If using
Authenticated Approvers and the standard 2cloudnine Approver Portal, this feature will not be available.

**Key Features**

1. **Employee Community**
   * Displays a fully customisable table of Timesheets, where you control the columns shown.
   * Selecting a Timesheet passes the record.Id to a Timesheet detail page, allowing you to
     trigger Custom Flows related to the selected record.
   * Enable time capture for Allowances (Timesheet Items)
2. **Approver Community**
   * Dynamically displays columns and related data for Timesheets, Expenses, and Leave
     Events using Custom Field Sets.
   * Allows different columns to be displayed based on the Status.

**IMPORTANT:** The Customisable Community Components leverage the same Product
functionality for Timesheet editing, Submission, and Approval. However, they replace the default
Product Components with these enhanced versions.

## Employee Functionality

**Skie Employee Timesheet Data Table**

Within the Employee Community, the Skie Employee Timesheet Data Table provides a powerful way to
display a list of Timesheets, while allowing you to define the columns and related data shown to
Employees. For instance, the ability to view Custom Timesheets or related data that is currently
inaccessible without this Component.

Employees can select the Edit Timesheet link to open the Timesheet on its own page. When this
happens, the Timesheet ID from the table is passed into the record page, enabling the use of custom
functionality such as Screen Flows. This enables possibilities for interacting with Timesheets and related
records, offering customisation that is otherwise not possible.

The Skie Employee Timesheets Dynamic Component retains all the core functionality of the standard
Employee Community Timesheets Component, ensuring uninterrupted operation for existing Employee
Timesheets processes.

In addition, the Skie Employee Timesheets Dynamic Component introduces the ability to capture Start
Time and End Time Entry against Allowances (Timesheet Items). While the standard Component only
supports entering a Quantity, this feature allows recording time for items that are not linked to a specific
Timesheet Entry.
A common use case is an On-Call Allowance, which is not entered as a Timesheet Entry, but may still
require Start and End Times for reporting or automation purposes.

<Note>
  **Important Notes**

  *(relates to Page 1)*

  *Time Entry for Allowances has no impact on Timesheet Interpretation. It is used solely for reporting or*
  *custom automation. The processing of the Allowance continues to be based on the entered quantity.*
</Note>

**Enabling Time Entry for Allowances**

To enable Time Entry for Allowances, the feature must first be activated in the Skie Employee Timesheets
Dynamic Component as detailed within the Utilities Configuration Guide. Once enabled, the Allowances
section of the Timesheet Component will display Start Time and End Time columns (see Figure 1).

<Frame>
  <img src="https://mintcdn.com/2cloudnine-2edf05eb/1TEygQHVPV4UC-ab/images/generated/administrator-guides/utilities-admin-guides/customisable-community-components-utilities-administrator-guide/customisable-community-components-utilities-administrator-guide-pdf-1-figure-1.png?fit=max&auto=format&n=1TEygQHVPV4UC-ab&q=85&s=4bdd8b4d90ee739896ec7b1c3d27d3ca" alt="Screenshot from Customisable Community Components (Utilities) - Administrator Guide" width="976" height="276" data-path="images/generated/administrator-guides/utilities-admin-guides/customisable-community-components-utilities-administrator-guide/customisable-community-components-utilities-administrator-guide-pdf-1-figure-1.png" />
</Frame>

**Controlling Access via Payee Allowance Record**

Despite being enabled in the Component, the ability to enter Times against Allowances is controlled by
the **Enable Time Entry in Community** field on the related Payee Allowance record (see Figure 2):

* If set to ‘No’ or left blank, the Start Time and End Time fields will be disabled.
* If set to ‘Yes’, the fields will be enabled and any times entered will be saved to the corresponding
  fields on the Timesheet Item record.

This ensures only specific Allowances require Times to be entered. If the entering of Start Times and End
Times for an Allowance is mandatory, update the **Community Time Entry Required** field on the Payee
Allowance to ‘Yes’ (see Figure 2).

<Frame>
  <img src="https://mintcdn.com/2cloudnine-2edf05eb/1TEygQHVPV4UC-ab/images/generated/administrator-guides/utilities-admin-guides/customisable-community-components-utilities-administrator-guide/customisable-community-components-utilities-administrator-guide-pdf-1-figure-2.png?fit=max&auto=format&n=1TEygQHVPV4UC-ab&q=85&s=7304f9a50daf69374857434cf9af2ab8" alt="Screenshot from Customisable Community Components (Utilities) - Administrator Guide" width="976" height="340" data-path="images/generated/administrator-guides/utilities-admin-guides/customisable-community-components-utilities-administrator-guide/customisable-community-components-utilities-administrator-guide-pdf-1-figure-2.png" />
</Frame>

## Approver Functionality

The Approver functionality allows tailored data to be displayed within the Timesheets, Expense Claims,
and Leave tabs. By using Field Sets and defining these within Custom Settings, you can dynamically
control the columns and related data displayed, with granular adjustments capable, based on record
status. This flexibility enables Custom Fields and related data to be displayed directly within the Approver
Components, just as it does for Employee Timesheets.

In addition, if Time Entry for Allowances is enabled in the Employee Community, the Start Time and End
Time fields will also be displayed in the Approver Community, ensuring Approvers have full visibility of all
Times entered by Employees.

**Update Custom Settings (Optional)**

The ‘Customisable Community Components’ Utilises Custom Setting for defining the Field Sets which
can be used to display different columns on the Approver Component. For example, including Custom
Fields from the Timesheet object that can become visible to the Approver.

To define these Custom Settings:
Go to **Setup** - **Custom Settings** - **2c9 - Approver Portal** - **Manage**

1. Select the **New** button at the top of the screen (if not already created).
2. Populate the relevant Fields (see list below and see Figure 3).
3. Select **Save** .

* **Approved Timesheet Column Fieldset**
  * Defines the Field Set for displaying columns when the Timesheet Status = Approved.
  * Existing Field Set ‘Approved Timesheet Column’ on the Timesheet object is available
    within the Package.
* **Submitted Timesheet Column Fieldset**
  * Defines the Field Set for displaying columns when the Timesheet Status = Submitted.
  * Existing Field Set Submitted Timesheet Column’ on the Timesheet object is available
    within the Package.
* **Rejected Timesheet Column Fieldset**
  * Defines the Field Set for displaying columns when the Timesheet Status = Rejected.
  * Existing Field Set Rejected Timesheet Column’ on the Timesheet object is available
    within the Package.
* **Submitted Expense Column Fieldset**
  * Defines the Field Set for displaying columns when the Expense Claim Status = Submitted.
  * Existing Field Set ‘Submitted Expense Column’ on the Expense Claim object is available
    within the Package.
* **Approve Expense Column Fieldset**
  * Defines the Field Set for displaying columns when the Expense Claim Status = Approved.
  * Existing Field Set ‘Approved Expense Column’ on the Expense Claim object is available
    within the Package.
* **Rejected Expense Column Fieldset**
  * Defines the Field Set for displaying columns when the Expense Claim Status = Rejected.
  * Existing Field Set ‘Rejected Expense Column’ on the Expense Claim object is available
    within the Package.
* **Approved Leave Column Fieldset**
  * Defines the Field Set for displaying columns when Payee Leave Event Status = Approved.
  * Existing Field Set ‘Approved Leave Column’ on the Payee Leave Event object is available
    within the Package.
* **Submit Leave Column Fieldset**
  * Defines the Field Set for displaying columns when Payee Leave Event Status = Submitted.
  * Existing Field Set ‘Submitted Leave Column’ on the Payee Leave Event object is available
    within the Package.
* **Reject Leave Column Fieldset**
  * Defines the Field Set for displaying columns when Payee Leave Event Status = Rejected.
  * Existing Field Set ‘Rejected Leave Column’ on the Payee Leave Event object is available
    within the Package.
* **Approver Action Error Text**
  * Configurable Text to display a message where an error is encountered during the
    Approver Action process
* **Display Selected Pay Rate**
  * Controls visibility of the ‘Selected Pay Rate’ field within the Leave Approver Component.

<Frame>
  <img src="https://mintcdn.com/2cloudnine-2edf05eb/1TEygQHVPV4UC-ab/images/generated/administrator-guides/utilities-admin-guides/customisable-community-components-utilities-administrator-guide/customisable-community-components-utilities-administrator-guide-pdf-3-figure-3.png?fit=max&auto=format&n=1TEygQHVPV4UC-ab&q=85&s=d43c4a1969bf8aa1af8566af7620e872" alt="Screenshot from Customisable Community Components (Utilities) - Administrator Guide" width="976" height="398" data-path="images/generated/administrator-guides/utilities-admin-guides/customisable-community-components-utilities-administrator-guide/customisable-community-components-utilities-administrator-guide-pdf-3-figure-3.png" />
</Frame>

To define the specific criteria of each Field Set defined in the Custom Setting, please refer to the Field
Sets - Administration Guide.

## Update Communities

The ‘Customisable Community Components’ provide an alternative to the standard 2cloudnine Packaged
Employee Timesheet and Approver Components.

**Employee Community**

The Customisable Community Components feature consists of two main Components:

1. **Customisable Timesheet Table:**
   * A replacement for the standard Timesheet Component, this table displays all relevant
     Timesheets in a customisable format tailored to User needs.
2. **New Timesheet Object Page:**
   * A dedicated page designed to accept the record.id from the Timesheet table (described
     in Key Features section above), enabling Users to view and manage individual Timesheet
     records seamlessly.

**Replace Standard Timesheet Component**

Go to **Setup** - **Digital Experiences** - **All Sites** - **Builder** (for the Employee Community)

1. Select the **Timesheets** page (Page that contains the Timesheet Component)
2. Delete the **Emp Comm Timesheets** Component from the page.
3. Select the **Components** button
4. Search for the **Skie Employee Timesheet Data Table** Component and drag onto the page.
5. Select the Component and update the relevant fields as per the Timesheet Components fields
   Table below (refer Figure 4)
6. Select **Publish** .

**Timesheet Component Fields**

The **Skie Employee Timesheet Data Table** contains a number of input fields that can be used to
determine the columns and certain behaviour of the Component (see Figure 4 below and also see Figure
5 for output example).

1. **Label:** Column Field
   1. **Details:** Defines the table columns by entering the Timesheet object field API names,
      separated by commas.
   2. **Example:** Name, tc9\_et\_\_Start\_Date\_\_c, tc9\_et\_\_End\_Date\_\_c, tc9\_et\_\_Client\_Name\_\_c,
      tc9\_et\_\_Assignment\_Name\_\_c, tc9\_et\_\_Approval\_Status\_Colour\_\_c,
      tc9\_util\_\_Edit\_Timesheet\_\_c
2. **Label:** Column Field Rich Text
   1. **Details:** Applies rich text to any fields from the ‘Column field’. For example any formula
      fields that reference URL’s or images must be included.
   2. **Example:** tc9\_et\_\_Approval\_Status\_Colour\_\_c, tc9\_util\_\_Edit\_Timesheet\_\_c
3. **Label:** Column Cell Attribute
   1. **Details:** Can be used to apply CSS styling to the table. A default field on the Timesheet
      labelled tc9\_util\_\_CSS\_\_c can be used to apply a baseline style.
   2. **Example:** \{"tc9\_et\_\_Approval\_Status\_\_c":\{    "class":\{ "fieldName":"tc9\_util\_\_CSS\_\_c"} } }
4. **Label:** Filter Timesheet StartDate
   1. **Details:** Used to remove all Timesheets prior to the defined date.
   2. **Example:** 01/01/2025
5. **Label:** Filter View in Portal
   1. **Details:** Checkbox to filter the Timesheet records displayed in the table. This should
      always be set to TRUE unless there is a specific requirement to only show future
      Timesheets.
   2. **Example:** If TRUE the table will show the current period and all past Timesheets. If FALSE
      the table will only show future Timesheets.

<Frame>
  <img src="https://mintcdn.com/2cloudnine-2edf05eb/1TEygQHVPV4UC-ab/images/generated/administrator-guides/utilities-admin-guides/customisable-community-components-utilities-administrator-guide/customisable-community-components-utilities-administrator-guide-pdf-4-figure-4.png?fit=max&auto=format&n=1TEygQHVPV4UC-ab&q=85&s=ba41e3c068e019fdafb4ab177c2fd8a6" alt="Screenshot from Customisable Community Components (Utilities) - Administrator Guide" width="976" height="394" data-path="images/generated/administrator-guides/utilities-admin-guides/customisable-community-components-utilities-administrator-guide/customisable-community-components-utilities-administrator-guide-pdf-4-figure-4.png" />
</Frame>

<Note>
  **Important Notes**

  *(Figure 4)*

  *The ‘Column Field’ on the Component is required to use the ‘Skie Employee Timesheet Data Table’*
  *Component. It must contain, at a minimum, the Name and tc9\_util\_\_Edit\_Timesheet\_\_c fields. In*
  *addition the tc9\_util\_\_Edit\_Timesheet\_\_c must be included in the ‘Column Field Rich Text’.*
</Note>

<Frame>
  <img src="https://mintcdn.com/2cloudnine-2edf05eb/1TEygQHVPV4UC-ab/images/generated/administrator-guides/utilities-admin-guides/customisable-community-components-utilities-administrator-guide/customisable-community-components-utilities-administrator-guide-pdf-5-figure-5.png?fit=max&auto=format&n=1TEygQHVPV4UC-ab&q=85&s=d86d28b119d06072adf5b9a6fed64c4f" alt="Screenshot from Customisable Community Components (Utilities) - Administrator Guide" width="976" height="362" data-path="images/generated/administrator-guides/utilities-admin-guides/customisable-community-components-utilities-administrator-guide/customisable-community-components-utilities-administrator-guide-pdf-5-figure-5.png" />
</Frame>

**Create Timesheet Object Page**

Go to **Setup > Digital Experiences > All Sites > Builder** (for the relevant Community site)

1. Select the **Pages Cog** and select **New Page**
2. Select **Objects Page**
3. Search for and select the **Timesheet (tc9\_et\_\_Timesheet\_\_c)** object.
4. Select **Create** and then **Create** again on the next prompt.
5. Select the **Pages Cog** again, and you will now see a **Timesheets** object which can be expanded to
   show 3 additional pages (see Figure 6)
6. Select the **Timesheet Detail** page.
7. Delete the **Record Banner** and **Record Information Tabs** Components.
8. Select the **Components** button
9. Find the **Skie Employee Timesheets Dynamic** Component and drag it onto the page.
10. Select the **Skie Employee Timesheets Dynamic** Component on the page to open the input
    screen.
11. In the **Timesheet Record Id** input field, enter **\{!recordId}** .

<Frame>
  <img src="https://mintcdn.com/2cloudnine-2edf05eb/1TEygQHVPV4UC-ab/images/generated/administrator-guides/utilities-admin-guides/customisable-community-components-utilities-administrator-guide/customisable-community-components-utilities-administrator-guide-pdf-5-figure-6.png?fit=max&auto=format&n=1TEygQHVPV4UC-ab&q=85&s=2db146451dc54098f37444df5675cc13" alt="Screenshot from Customisable Community Components (Utilities) - Administrator Guide" width="976" height="514" data-path="images/generated/administrator-guides/utilities-admin-guides/customisable-community-components-utilities-administrator-guide/customisable-community-components-utilities-administrator-guide-pdf-5-figure-6.png" />
</Frame>

12. Select Yes/No for enabling Payee Leave Events, Expenses, Allowances & Time Entry for Allowances
    (see Figure 7).
13. Select **Publish** .

<Frame>
  <img src="https://mintcdn.com/2cloudnine-2edf05eb/1TEygQHVPV4UC-ab/images/generated/administrator-guides/utilities-admin-guides/customisable-community-components-utilities-administrator-guide/customisable-community-components-utilities-administrator-guide-pdf-6-figure-7.png?fit=max&auto=format&n=1TEygQHVPV4UC-ab&q=85&s=bbe5c05ae84c026e2bb9860065fe0561" alt="Screenshot from Customisable Community Components (Utilities) - Administrator Guide" width="976" height="498" data-path="images/generated/administrator-guides/utilities-admin-guides/customisable-community-components-utilities-administrator-guide/customisable-community-components-utilities-administrator-guide-pdf-6-figure-7.png" />
</Frame>

**Approver Community**

Updating the Approver Community consists of replacing the Packaged **‘Approval Portal’** Lightning Web
Component with a new Customisable Component.

To replace the Approval Portal Component:

Go to **Setup** - **Digital Experiences** - **All Sites** - **Builder** (for the Approver Community)

1. Select the page containing the ‘Approval Portal’ Component. This Component will be different
   based upon using a shared Employee/Approver Community (Authenticated) or separate
   Communities (Guest Approvers).
2. Delete the **Approval Portal** component from the page.
3. Select the **Components** button
4. Search for the **Skie Approver Portal Dynamic** Component if using Authenticated Approvers, or
   **Skie Guest Approval Portal** Component if using Guest Approvers.
5. Drag the Components onto the page, then select **Publish.**

## Further Information

| Document                                        | Document Type       | Description                                                         |
| ----------------------------------------------- | ------------------- | ------------------------------------------------------------------- |
| Configuration Guide to 2cloudnine Payroll Suite | Configuration Guide | Configuration Guide for the implementation of 2cloudnine Payroll.   |
| Configuration Guide To 2cloudnine Utilities     | Configuration Guide | Configuration Guide for the implementation of 2cloudnine Utilities. |
| QRG Create Payee Allowances - Timesheet         | Task Instructions   | How to create Timesheet Payee Allowances                            |
| Field Sets - Administrator Guide                | Administrator Guide | Administrator Guide for the Field Sets.                             |
