Design property

.prettierrc

@@ -3,6 +3,7 @@
     "printWidth": 120,
     "singleQuote": true,
     "tabWidth": 4,
+    "plugins": ["prettier-plugin-apex"],
     "overrides": [
         {
             "files": "**/lwc/**/*.html",
@@ -15,6 +16,12 @@
             "options": {
                 "parser": "html"
             }
+        },
+        {
+            "files": "*.cls",
+            "options": {
+                "parser": "apex"
+            }
         }
     ]
 }

force-app/main/default/classes/Timeline_Helper.cls

@@ -222,8 +222,6 @@ public with sharing class Timeline_Helper {
         for (String key : modelsSeparatedByMonth.keySet()) {
             Datetime d = modelsSeparatedByMonth.get(key)[0].record.dateValueDb;
             String name = getMonth(d.month()) + ' ' + d.year();
-            if (includeSize == true)
-                name += ' (' + modelsSeparatedByMonth.get(key).size() + ')';
             results.add(new Timeline_ModelList(key, name, modelsSeparatedByMonth.get(key), true));
         }
 

force-app/main/default/classes/Timeline_Model.cls

@@ -65,6 +65,38 @@ global with sharing class Timeline_Model implements Comparable {
 
         @AuraEnabled
         public String customComponent;
+
+        @AuraEnabled
+        public Integer clampLines;
+
+        @AuraEnabled
+        public List<Header> headers;
+    }
+
+    public class Header {
+        @AuraEnabled
+        public Object header;
+        @AuraEnabled
+        public String type;
+        @AuraEnabled
+        public boolean isString;
+        @AuraEnabled
+        public boolean isDatetime;
+        @AuraEnabled
+        public boolean isDate;
+
+        public Header(String header, sObject sObj) {
+            this.header = get(sObj, header);
+            Schema.DescribeFieldResult fi = sObj.getSObjectType()
+                .getDescribe()
+                .fields.getMap()
+                .get(header)
+                .getDescribe();
+            this.type = fi.getType().name();
+            this.isString = this.type == 'STRING';
+            this.isDatetime = this.type == 'DATETIME';
+            this.isDate = this.type == 'DATE';
+        }
     }
 
     public class Filter {
@@ -104,7 +136,7 @@ global with sharing class Timeline_Model implements Comparable {
             ? (Id) get(sObj, config.Timeline_Child__r.SObjectRelatedUserId__c)
             : null;
         record.assigneeId = config.SObjectAssigneeId__c != null ? (Id) get(sObj, config.SObjectAssigneeId__c) : null;
-        record.title = (String) get(sObj, config.Timeline_Child__r.SObjectTitle__c);
+        record.title = (String) get(sObj, config.Timeline_Child__r.SObjectTitle__c.deleteWhiteSpace().split(',')[0]);
         record.durationInMinute = (Integer) get(sObj, 'DurationInMinutes');
         record.allowAutoOpen = config.Timeline_Child__r.AllowAutoOpen__c;
         record.sObjectKind = config.Timeline_Child__r.SObjectName__c;
@@ -116,6 +148,12 @@ global with sharing class Timeline_Model implements Comparable {
         record.dateValueDb = getDateValue(config, sObj, record);
         record.subtitleOverride = (String) get(sObj, config.Timeline_Child__r.SObjectSubtitle__c); // To add subtitle for samtale
         record.customComponent = config.Timeline_Child__r.CustomComponent__c;
+        record.clampLines = (Integer) config.Timeline_Child__r.ClampLines__c;
+
+        record.headers = new List<Header>();
+        for (String headerField : config.Timeline_Child__r.SObjectTitle__c.deleteWhiteSpace().split(',')) {
+            record.headers.add(new Header(headerField, sObj));
+        }
 
         theme.sldsTimelineItemColor = config.Timeline_Child__r.SLDS_Timeline_Color__c;
         theme.icon = getIconValue(config, sObj);

force-app/main/default/classes/Timeline_QueriesHelper.cls

@@ -38,7 +38,8 @@ public with sharing class Timeline_QueriesHelper {
             'Timeline_Child__r.SubtitleRelatedUserPrepositionEng__c, Timeline_Child__r.SubtitleRelatedUserPrepositionNor__c, ' +
             'Timeline_Child__r.AutomaticRefresh__c, Timeline_Child__r.AutomaticRefresh_PushTopicName__c, ' +
             'Timeline_Child__r.AllowAutoOpen__c, ' +
-            'Timeline_Child__r.CustomComponent__c,' +
+            'Timeline_Child__r.CustomComponent__c, ' +
+            'Timeline_Child__r.ClampLines__c, ' +
             'Timeline_Child__r.FilterablePicklist1__c, Timeline_Child__r.FilterablePicklist2__c, Timeline_Child__r.FilterableCheckbox__c ' +
             'FROM TimelineParent__mdt ' +
             'WHERE SObjectParent__c = : parentSObjectType';
@@ -78,7 +79,8 @@ public with sharing class Timeline_QueriesHelper {
             fields,
             mdt.Timeline_Child__r.SObjectName__c,
             parameters,
-            mdt.Timeline_Child__r.SObjectDateField__c);
+            mdt.Timeline_Child__r.SObjectDateField__c
+        );
     }
 
     // --------------------------------------------------- //
@@ -97,7 +99,10 @@ public with sharing class Timeline_QueriesHelper {
                         field = (String) mdt.get(mdtField);
                     }
                     if (field != null) {
-                        fieldsToQuery.add(field);
+                        List<String> splitFields = field.split(',');
+                        for (String f : splitFields) {
+                            fieldsToQuery.add(f.trim());
+                        }
                     }
                 }
                 if (!mdt.Timeline_Child__r.SLDS_Icon__c.contains(':')) {
@@ -122,15 +127,26 @@ public with sharing class Timeline_QueriesHelper {
     // ---------------- getQueryParameters --------------- //
     // --------------------------------------------------- //
 
-    public static String getQueryParameters(TimelineParent__mdt mdt, String recordId, Integer amountOfMonths, String recordTypeId) {
+    public static String getQueryParameters(
+        TimelineParent__mdt mdt,
+        String recordId,
+        Integer amountOfMonths,
+        String recordTypeId
+    ) {
         String now = getTime(mdt.Timeline_Child__r.SObjectDateFieldIsDate__c);
         String dateField = mdt.Timeline_Child__r.SObjectDateField__c;
         String parameters = '';
 
-        if(String.isNotBlank(recordTypeId)) {
-            parameters = mdt.SObjectRelationshipField__c + ' = \'' + recordId + '\' AND ' + 'RecordTypeId = \'' + recordTypeId + '\' AND ';
-        }
-        else {
+        if (String.isNotBlank(recordTypeId)) {
+            parameters =
+                mdt.SObjectRelationshipField__c +
+                ' = \'' +
+                recordId +
+                '\' AND ' +
+                'RecordTypeId = \'' +
+                recordTypeId +
+                '\' AND ';
+        } else {
             parameters = mdt.SObjectRelationshipField__c + ' = \'' + recordId + '\' AND ';
         }
         // task specific parameter

force-app/main/default/layouts/TimelineChild__mdt-Timeline - Child.layout-meta.xml

@@ -138,6 +138,10 @@
                 <behavior>Edit</behavior>
                 <field>SubtitleRelatedUserPrepositionNor__c</field>
             </layoutItems>
+            <layoutItems>
+                <behavior>Edit</behavior>
+                <field>ClampLines__c</field>
+            </layoutItems>
         </layoutColumns>
         <layoutColumns>
             <layoutItems>
@@ -259,7 +263,7 @@
                 <field>ExpandedFieldsToDisplay__c</field>
             </layoutItems>
         </layoutColumns>
-        <layoutColumns/>
+        <layoutColumns />
         <style>TwoColumnsLeftToRight</style>
     </layoutSections>
     <layoutSections>
@@ -294,9 +298,9 @@
         <detailHeading>true</detailHeading>
         <editHeading>false</editHeading>
         <label>Custom Links</label>
-        <layoutColumns/>
-        <layoutColumns/>
-        <layoutColumns/>
+        <layoutColumns />
+        <layoutColumns />
+        <layoutColumns />
         <style>CustomLinks</style>
     </layoutSections>
     <showEmailCheckbox>false</showEmailCheckbox>
@@ -305,9 +309,9 @@
     <showRunAssignmentRulesCheckbox>false</showRunAssignmentRulesCheckbox>
     <showSubmitAndAttachButton>false</showSubmitAndAttachButton>
     <summaryLayout>
-        <masterLabel>00hKM0000018E96</masterLabel>
+        <masterLabel>00hKF000004VW8D</masterLabel>
         <sizeX>4</sizeX>
         <sizeY>0</sizeY>
         <summaryLayoutStyle>Default</summaryLayoutStyle>
     </summaryLayout>
-</Layout>
+</Layout>

force-app/main/default/lwc/timeline/slick.css

@@ -0,0 +1,14 @@
+.custom-container {
+    align-items: flex-start;
+    border-bottom: 1px solid #767676;
+    margin: 0 1rem;
+}
+
+.left-column {
+    padding-top: 4rem;
+    padding-bottom: 1.25rem;
+}
+
+.right-column {
+    padding-top: 1.75rem;
+}

force-app/main/default/lwc/timeline/slick.html

@@ -0,0 +1,71 @@
+<template>
+    <div class="slds-theme_default slds-is-relative">
+        <div class="slds-grid custom-container">
+            <div class="slds-col slds-large-size_8-of-12 left-column">
+                <h3 class="slds-card__header-title">
+                    <lightning-icon icon-name={headerIcon} size="small" class="slds-var-m-right_small"></lightning-icon>
+                    {header}
+                </h3>
+            </div>
+            <div class="slds-col slds-large-size_4-of-12 right-column">
+                <c-timeline-filter
+                    lwc:if={filterIsActive}
+                    filter-properties={filterProperties}
+                    is-grouped={isGrouped}
+                    picklist-filter-1-label={picklistFilter1Label}
+                    picklist-filter-2-label={picklistFilter2Label}
+                    hide-my-activities-filter={hideMyActivitiesFilter}
+                    onfilterchange={handleFilter}
+                    log-event={logEvent}
+                    design={design}
+                ></c-timeline-filter>
+            </div>
+        </div>
+        <div lwc:if={loading} class="slds-scrollable" style={loadingStyle}>
+            <lightning-spinner alternative-text="Loading" size="small"></lightning-spinner>
+        </div>
+        <div lwc:elseif={error}>
+            <div class="slds-text-heading_large slds-align_absolute-center">{labels.errorTitle}</div>
+            <div class="slds-text-color_destructive slds-align_absolute-center slds-var-m-around_x-large">
+                {errorMsg}
+            </div>
+        </div>
+        <div lwc:elseif={empty}>
+            <div class="slds-text-heading_large slds-align_absolute-center">{labels.emptyTitle}</div>
+            <div class="slds-text-heading_small slds-align_absolute-center slds-var-m-around_x-large">
+                {emptySubtitle}
+            </div>
+        </div>
+        <div lwc:else>
+            <ul class="slds-timeline">
+                <lightning-accordion
+                    allow-multiple-sections-open
+                    active-section-name={openAccordionSections}
+                    onsectiontoggle={handleSectionToggle}
+                    lwc:if={finishedLoading}
+                >
+                    <template for:each={data} for:item="group" for:index="groupIndex">
+                        <c-timeline-group
+                            key={group.id}
+                            group={group}
+                            labels={labels}
+                            amount-of-records={amountOfRecords}
+                            amount-of-records-to-load={amountOfRecordsToLoad}
+                            open-accordion-sections={openAccordionSections}
+                            group-index={groupIndex}
+                            expand-check={expandCheck}
+                            log-event={logEvent}
+                            design={design}
+                            include-amount-in-title={includeAmountInTitle}
+                        >
+                        </c-timeline-group>
+                    </template>
+                </lightning-accordion>
+            </ul>
+            <div lwc:if={hasMoreDataToLoad} class="slds-align_absolute-center loadMoreFooter" onclick={loadMore}>
+                <button class="slds-button loadMoreBtn">{labels.loadMore}</button>
+            </div>
+            <div lwc:else class="slds-align_absolute-center slds-text-color_weak slds-var-p-top_medium"></div>
+        </div>
+    </div>
+</template>

force-app/main/default/lwc/timeline/timeline.html

@@ -60,6 +60,8 @@
                         group-index={groupIndex}
                         expand-check={expandCheck}
                         log-event={logEvent}
+                        design={design}
+                        include-amount-in-title={includeAmountInTitle}
                     >
                     </c-timeline-group>
                 </template>
@@ -74,11 +76,15 @@
         </div>
         <div if:true={error} class="slds-var-m-top_large">
             <div class="slds-text-heading_large slds-align_absolute-center">{labels.errorTitle}</div>
-            <div class="slds-text-color_destructive slds-align_absolute-center slds-var-m-around_x-large">{errorMsg}</div>
+            <div class="slds-text-color_destructive slds-align_absolute-center slds-var-m-around_x-large">
+                {errorMsg}
+            </div>
         </div>
         <div if:true={empty} class="slds-var-m-top_large">
             <div class="slds-text-heading_large slds-align_absolute-center">{labels.emptyTitle}</div>
-            <div class="slds-text-heading_small slds-align_absolute-center slds-var-m-around_x-large">{emptySubtitle}</div>
+            <div class="slds-text-heading_small slds-align_absolute-center slds-var-m-around_x-large">
+                {emptySubtitle}
+            </div>
         </div>
 
         <!-- ************************************************************************ -->