---
title: "Period Details"
slug: "period-details-widget"
updated: 2026-04-17T07:41:06Z
published: 2026-04-17T07:41:06Z
canonical: "learn.servitly.com/period-details-widget"
---

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

# Period Details

Displays the reference period of the page data in a box.

![Period Details](https://components-manager.servitly.com/components/PeriodDetails_1/IMAGES/_screenshot?owner=AG_Servitly)

## **Template Syntax**

Below you can find some examples of how to use the component within a template.

```xml

                <period-details-widget [config]="{bgClass: 'energy-report', defaultPeriod: 'LAST_MONTH'}"></period-details-widget>
            
```

XML

  

## Component Reference

Here is a comprehensive list of all the elements and properties that can be used to configure the component.

#### Period Details `&lt;period-details-widget&gt;`

| *Default Loading Period* | The default period displayed when entering the page. **Name**: config.defaultPeriod **Type**: PERIODS \| Optional `[config]="{defaultPeriod: 'LAST_30_DAYS'}"` |
| --- | --- |
| *Period Variable* | The id of the page's variable providing the date range filtering period, for instance the id of a <period-filter-field>. **Name**: inputs.period **Type**: STRING \| Optional `[inputs]="{period: 'period'}"` |
| *Title* | The title displayed on the top part of the widget box. **Name**: title **Type**: STRING \| Optional `[title]="'Period'"` |
| **Rendering** |
| *Availability* | Configure availability based on active features on Digital Plan on Add-ons **Name**: hasFeature **Type**: FEATURE (multiple) \| Optional `[hasFeature]="['feature_a', 'feature_b']"` |
| *Background Class* | **Name**: config.bgClass **Type**: STRING \| Optional **Default Value**: *bg-info* `[config]="{bgClass: 'abc'}"` |
| *CSS Class* | The name(s) of the CSS class used to customize the widget layout. **Name**: class **Type**: STRING \| Optional `class="my-custom-class"` |
| *Visibility Condition* | The expression that allows you to reduce the visibility of the element. **Name**: *ngIf **Type**: STRING \| Optional `*ngIf="getUser().organizationId != null"` |

## Full Syntax Example

```xml

<period-details-widget    
    [title]="'Period'"
    [config]="{
        defaultPeriod: 'LAST_30_DAYS',
        bgClass: 'abc'
    }"
    [inputs]="{
        period: 'period'
    }"
    class="my-custom-class"
    *ngIf="getUser().organizationId != null"
    hasFeature="['feature_a', 'feature_b']"></period-details-widget>
```