Idea Portal Widget specify field hint (or tooltip if more appropriate)

litchick10 · ‎06-22-2020

I have added fields to the IM Create/Edit Idea widget called and when I hover over the field title, it only displays the field name. I'm not sure if it is hints or tooltips but I want to give users some info on the field instead of the title. I suspect the hover over value gets set in the Server script but am VERY new to portal widgets and could sure use some help

Here is code used for one field:

HTML

<! --  Added Requested for Sys User Unit Selection -->   
<label for="u_opened_for" class="field-label" title="{{::data.formModel._fields.u_opened_for.label}}" aria-label="{{::data.formModel._fields.u_opened_for.label}} "
tooltip-right="true">
     <span class="field-decorations">
     <span ng-show="::data.formModel._fields.u_opened_for.mandatory" class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': data.formModel._fields.u_opened_for.mandatory_filled()}"
      title="${Required}" style="padding-right: .25em" aria-label="{{data.formModel._fields.u_opened_for.mandatory_filled()? '${Required Filled}' : '${Required}'}}"></span>
</span>
      {{::data.formModel._fields.u_opened_for.label}}
 </label>
<sn-record-picker field="u_opened_for" table="'sys_user'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="100" ></sn-record-picker>

Client Controller

    $scope.data.formModel = {
        _fields: {
             u_opened_for: {
		label: $scope.data.messages.formLabels.u_opened_for,
		name: $scope.data.messages.formLabels.u_opened_for,
		stagedValue: ($scope.data.ideaInfo && $scope.data.ideaInfo.u_opened_for) || '',
		value: '',
		displayValue: '',
		type: 'reference',
		mandatory: true,
		mandatory_filled: function () {
		return !!($scope.data.formModel._fields.u_opened_for.stagedValue);
			},
			isMandatory: function () {
			return true;
			}
		}

Server Script

data.messages.formLabels = {
'u_opened_for': gs.getMessage('Opened for')

Rendered Form

Chander Bhusha1 · ‎06-22-2020

Hi litchick10,

In the above widget code which you have share in that the label title is taking from the server side and it is showing the label only in the hover over text.

One thing you can do is to set the hover over text for the label in server side and use that in the html part as shown below.

Server side:

1. Just declare a data variable with the hover over text in the server side as shown below.

//Server script
data.label_hover = "Please select the opened for";

In HTML side

Use that variable in the label text:

Here I have replaced the title of the label opened for to data.label_hover Instead of {{::data.formModel._fields.u_opened_for.label}}.

Updated HTML script would be:

! --  Added Requested for Sys User Unit Selection -->   
<label for="u_opened_for" class="field-label" title="{{data.label_hover}}" aria-label="{{::data.formModel._fields.u_opened_for.label}} "
tooltip-right="true">
     <span class="field-decorations">
     <span ng-show="::data.formModel._fields.u_opened_for.mandatory" class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': data.formModel._fields.u_opened_for.mandatory_filled()}"
      title="${Required}" style="padding-right: .25em" aria-label="{{data.formModel._fields.u_opened_for.mandatory_filled()? '${Required Filled}' : '${Required}'}}"></span>
</span>
      {{::data.formModel._fields.u_opened_for.label}}
 </label>
<sn-record-picker field="u_opened_for" table="'sys_user'" display-field="'name'" value-field="'sys_id'" search-fields="'name'" page-size="100" ></sn-record-picker>

The title of label will show you the hover over text of the opened by which you have declare in the server side.

Mark helpful and correct if it helps.

Thanks,

CB

View solution in original post

Chander Bhusha1 · ‎06-22-2020