Customizing the Announcements Widget

[SHWA]

Hello,

I’ｍ working on customizing the Announcements widget to display the From field in addition to the Title field.

When I added {{::a.from}} to the HTML of the widget, the numbers are displayed like the image. Is it possible to set the display format to date?

Thank you.

[Karthiga S]

Hi @SHWA 

You will need to update the server code too. Use syntax like the one below in your widget.

record.from=gr.getValue('your_date_field');

Please mark it Correct and Hit Like if you find this helpful!

Regards,

Karthiga

[SHWA]

@Karthiga S Thank you for your reply
For the OOTB Announcements widget, the server script is as follows, but how should I add the code you taught me?
Sorry I'm new to coding.

(function() {
    if (options.title)
        options.title = gs.getMessage('{0}', options.title);
    else
        options.title = gs.getMessage('Announcements');
	options.max_records = options.max_records ? options.max_records : 20;
	options.paginate = options.paginate === 'true' && options.max_records;
	options.use_display_style = options.use_display_style === 'true';
	data.rowsMessage = gs.getMessage('Rows {0} - {1} of {2}');
	if (options.view_all_page) {
		var gr = new GlideRecord('sp_page');
		gr.get(options.view_all_page);
		options.view_all_page = gr.getValue('id');
	}

	if (options.type) {
		var types = [];

		options.type.split(',').forEach(function(type) {
			var gr = new GlideRecord('announcement_consumer_type');
			gr.get(type);
			types.push(gr.getDisplayValue('name'));
		});

		options.type = types.join(',');
	}
})();

[Karthiga S · Accepted solution]

Hello @SHWA ,

I just implemented it to check. please follow the same.

Update your line 11 as below

<div class="from">{{::a.from | date:'MMM d, yyyy'}}</div>

The output will be like

There are other date formats available too. Listed below

<div>

      <b><u>Formatting using date elements</u></b>

      <br><b>Date in MMM d, yyyy:</b> {{data.mydate | date:'MMM d, yyyy'}}

      <br><b>Date in yyyy-MM-dd HH:mm:ss Z:</b> {{data.mydate | date:'yyyy-MM-dd HH:mm:ss Z'}}

      <br><b>Date in MM/dd/yyyy @ h:mma:</b> {{data.mydate | date:'MM/dd/yyyy @ h:mma'}}

      <br><b>Date in "MM/dd/yyyy 'at' h:mma":</b> {{data.mydate | date:"MM/dd/yyyy 'at' h:mma"}}

      <br><b>Time in "h:mma":</b> {{data.mydate | date:"h:mma"}}

  <br><br>

  <b><u>Formatting using Predefined format</u></b>

      <br><b>Date in medium:</b> {{data.mydate | date:'medium'}}

      <br><b>Date in fullDate:</b> {{data.mydate | date:'fullDate'}}

      <br><b>Date in longDate:</b> {{data.mydate | date:'longDate'}}

      <br><b>Date in mediumDate:</b> {{data.mydate | date:'mediumDate'}}

      <br><b>Time in mediumTime:</b> {{data.mydate | date:'mediumTime'}}

      <br><b>Time in shortTime:</b> {{data.mydate | date:'shortTime'}}

</div>

Results 

Please mark it Correct and Hit Like if you find this helpful!

Regards,

Karthiga

[SHWA]

Hello @Karthiga S ,

Thank you so much for your response!
It worked perfectly!