How to customize the existing widget?

[Shiva prasad t]

I have one existing widget in employee center called as my items view. I need to do some modification to it.

I need to do that is "requests" should be primary and "tasks" should be secondary. Like i need to interchange both.

[Musab Rasheed]

Hello,

As one widget might be referred at more than one place so better to go to widget and click on 'Clone Widget' and do customization and refer where ever you want.

Mark my answer as correct if that helps

Regards

[Talya]

Hi @Musab Rasheed ,

Let's say widget A has embedded widget B , Widget B has embedded widget C and widget C has embedded widget D.

Widget F has embedded widget G and widget G has embedded widget D.

As per my requirement if I customize my widget D and this is must can't skip customization,

1. Is it suggested to clone and customize widget D?

2. Is it suggested to directly customize widget D?

If I clone widget D, as custom_D then I need to call custom_D from Widget C and Widget G.

So I need to end up cloning all A,B,C,D,F,G. 

I am exactly at this situation right now. Where I do not want to clone 6 widgets since all are embedded in each other like the structure I explained above.

Please suggest how should I proceed!

Thanks,

[asifnoor]

Hi,

If you are looking at just changing the order, then i suggest you open the widget editor and under hmtl, you can change the order. However if you want to change the behavior, then as Rasheed suggested, clone the widget and then make your changes.

[Shiva prasad t]

I want to just change the order. This is the script which I have, but I am not sure where can i do changes in this. could you please assist me where should I do changes on this script!

<div ng-if="isLoading" class="my-items-container">
    <div class="widget-header">
        <h3 class="title">{{::data.title}}</h3> </div>
    <div class="my-items-body" ng-class="c.primaryActivity ? '' : 'no-primary-activity'">
        <div class="activity-check" ng-if="c.checkForData()">
            <p class="no-items"> There's nothing to check in on right now </p>
        </div>
        <div class="summary-view">
            <a class="primary" ng-if="c.primaryActivity" ng-href="{{c.primaryActivity.itemUrl}}" target="{{c.primaryActivity.target}}" aria-label="{{c.primaryActivity.itemCount}} {{c.primaryActivity.itemName}} {{::data.title}}">
                <div class="primary-activity" ng-class=" c.primaryActivity.itemCount == 0 ? 'text-grey' : '' ">
                    <h3 class="primary-item-count">{{c.primaryActivity.itemCount}}</h3>
                    <span class="primary-item-name" ec-multiline-ellipsis-tooltip ec-ellipsis-tooltip-title="{{c.primaryActivity.itemName}}">{{c.primaryActivity.itemName}}</span>
                </div>
            </a>
            <div class="secondary" ng-class="(c.primaryActivity) ? 'primary-width' : 'secondary-width'">
                <div class="activity-container" ng-repeat="item in c.secondaryActivity track by $index">
                    <a class="secondary-activity" ng-class=" item.itemCount == 0 ? 'text-grey' : '' " ng-href="{{item.itemUrl}}" target="{{item.target}}" aria-label="{{item.itemCount}} {{item.itemName}} {{::data.title}}">
                        <span class="secondary-item-count">{{item.itemCount}}</span>
                        <span class="secondary-item-name" ec-multiline-ellipsis-tooltip ec-ellipsis-tooltip-title="{{item.itemName}}">{{item.itemName}}</span>
                    </a>
                </div>
            </div>
        </div>
        <div class="list-view" ng-if="c.listViewData.length > 0">
            <div class="header">
                <h3 class="list-header">{{::data.list_title}}</h3> 
                <a class="view-all" ng-if="c.showViewAll" ng-href="{{c.primaryActivity.itemUrl}}" target="{{c.primaryActivity.target}}">${View all}
                      <i aria-hidden="true" class="right-arrow fa fa-chevron-right"></i>
                </a>
            </div>
            <div class="card-container">
                <a class="flex-item-card" ng-repeat="item in c.listViewData track by $index | limitTo:data.recordLimit" ng-href="{{item.itemUrl}}" target="{{item.target}}">
          <div class="item-description"><span ng-if="item.badge" class="item-badge" ng-attr-style="background-color:{{item.badgeColor || ''}};color:{{item.badgeTextColor || ''}}">{{::item.badge}}</span></div>
                    <div class="card-image"> <img ng-if="item.image" class="image-item" aria-hidden="true" ng-src="{{item.image}}" />
                        <div ng-class="item.image ? 'card-text-container' : ''">
                            <div ng-if="item.title" class="item-title text-ellipsis-two-line text-ellipsis"><p ec-multiline-ellipsis-tooltip ec-ellipsis-tooltip-title="{{::item.title}}">{{::item.title}}</p> </div>
                            <div ng-if="item.description" class="item-description text-ellipsis-two-line text-ellipsis"><p ec-multiline-ellipsis-tooltip ec-ellipsis-tooltip-title="{{::item.description}}">{{::item.description}}</p> </div>
                        </div>
                    </div>
                    <div class="field-name">
                        <div ng-if="item.field1Value" class="item-field text-ellipsis-two-line text-ellipsis flex-grow" ng-class="item.field2Value ? 'fix-width' : 'full-fix-width'"> <p ec-multiline-ellipsis-tooltip ec-ellipsis-tooltip-title="{{::item.field1Label}}">{{::item.field1Label}}</p> </div>
                        <div ng-if="item.field2Value" class="item-field text-ellipsis-two-line text-ellipsis flex-grow" ng-class="item.field1Value ? 'fix-width' : 'full-fix-width'"> <p ec-multiline-ellipsis-tooltip ec-ellipsis-tooltip-title="{{::item.field2Label}}">{{::item.field2Label}}</p> </div>
                    </div>
                    <div class="field-value">
                        <div ng-if="item.field1Value" class="item-value field-container text-ellipsis" ng-class="item.field2Value ? 'fix-width' : 'full-fix-width'"> <p ec-multiline-ellipsis-tooltip ec-ellipsis-tooltip-title="{{::item.field1Value}}">{{::item.field1Value}}</p> </div>
                        <div ng-if="item.field2Value" class="item-value field-container text-ellipsis" ng-class="item.field1Value ? 'fix-width' : 'full-fix-width'"> <p ec-multiline-ellipsis-tooltip ec-ellipsis-tooltip-title="{{::item.field2Value}}">{{::item.field2Value}}</p> </div>
                    </div>
                </a>
            </div>
        </div>
    </div>