Ticket view Portal - Display the field even it doesn't have the Value

Vamshi_ch123
Tera Contributor

‎10-17-2023 10:15 PM - edited ‎10-17-2023 10:17 PM

Hi, I have a widget for ticket view where I made some changes to edit the field called 'customer reference id.' However, currently, this field is only viewable and editable when it has a value. I would like the field to always be visible, even when it doesn't have a value.

 

How to modify below script so that the "u_customer_reference_id" field is displayed all the time

 

<div ng-if="data.canRead" class="panel panel-primary b">
	<div class="panel-heading" ng-if="::!c.hideHeader">
		<!--<h4 class="panel-title">{{data.tableLabel}} ${details}</h4>-->
    <h4 class="panel-title">{{data.tableLabel}}</h4>
	</div>
	<div class="panel-body">
		<div ng-if="data.fields.length > 0">
			<div class="row">
				<div ng-class="{'col-md-6' : field.column_name != 'description' && field.column_name != 'expected_outcome', {{::field.column_name}}: c.options.add_columnname_as_class && c.options.add_columnname_as_class == 'true'}" class="col-sm-12 col-xs-6 m-b" ng-repeat="field in data.fields" 
             ng-if="field.value && (field.type != 'decimal' || field.type == 'decimal' && field.value != 0)" >
					<label class="m-n">
						<strong>{{field.label}}</strong>
					</label>
          
          
          
         <div ng-if="field.column_name == 'u_customer_reference_id'" id="c1">
  
  				<strong ng-model ="c.clk" ng-change = "c.updating(c.clk)" contenteditable>{{field.display_value}}</strong>
					</div>

                       
           
          
					<div ng-if="field.column_name == 'description' || field.column_name == 'expected_outcome'">
						<div ng-if="field.display_value.length > data.limit">{{ field.display_value | limitTo: data.limit }} ...
							<span aria-live="polite" class="m-b text-overflow-ellipsis">
								<a href="javascript&colon;void(0)" 
                  ng-click="c.openLargeInfo(${field.label}, ${field.display_value})">
                  Show more</a>
							</span>
						</div>
            
            
            
						<div ng-if="field.display_value.length <= data.limit">{{field.display_value}}</div>
            
					</div>
                  	<div ng-if="c.data.page_id== 'csm_case_task_ticket' && field.column_name == 'parent'">
						<div>
							<a href="javascript&colon;void(0)" ng-click="c.parentRedirect(c.data.parent_case_url)"   >
                              {{field.display_value}}
                          </a>
						</div>
                      
                      
                      
                      
                      
                      
					</div>
					<div ng-if="field.column_name != 'description' && field.column_name != 'expected_outcome' && field.column_name != 'parent'" >  
						<span ng-switch="field.type">
							<div ng-switch-when="glide_date_time" title="{{field.display_value}}">
                              <div ng-if="field.label == 'Resolution SLA Due Date' ||  field.label == 'Negotiated Due Date' || field.label =='Release Date'">
                                {{field.display_value}}</div>
                              <div ng-if="field.label != 'Resolution SLA Due Date' &&  field.label != 'Negotiated Due Date' && field.label !='Release Date'">
                                
								<sn-time-ago timestamp="::field.value" /></div>
							</div>
							<div ng-switch-default >{{field.display_value}}</div>
              
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

 Thanks

 

0 Helpfuls
  • 230 Views
2 REPLIES 2

Danish Bhairag2
Tera Sage
Tera Sage

‎10-17-2023 10:19 PM

Hi @Vamshi_ch123 

 

To make the 'customer reference id' field always visible, even when it doesn't have a value, you can modify the template as follows. Update the part of your code related to the 'customer reference id' field as shown below:


<div ng-if="field.column_name == 'u_customer_reference_id'" id="c1">
<label class="m-n">
<strong>{{field.label}}</strong>
</label>
<div contenteditable>{{field.display_value || 'N/A'}}</div>
</div>

In this modification, I've replaced the `<strong>` tag with a `<label>` tag for consistency and placed the label outside of the contenteditable field. The `contenteditable` attribute is added to make the field editable.

Additionally, I've used `{{field.display_value || 'N/A'}}` to display 'N/A' in the field if `field.display_value` is falsy (i.e., if it's empty or undefined). This ensures that the field is always visible, even when it doesn't have a value. Feel free to adjust the 'N/A' text to any other placeholder you prefer.

Please replace the existing code for the 'customer reference id' field with this modified version in your widget template.

 

Thanks,

Danish

0 Helpfuls

Vamshi_ch123
Tera Contributor
In response to Danish Bhairag2

‎10-17-2023 11:16 PM - edited ‎10-17-2023 11:20 PM

Hi @Danish Bhairag2 , 

 

I have made those changes but still the field is not displayed if no value

 

<div ng-if="data.canRead" class="panel panel-primary b">
	<div class="panel-heading" ng-if="::!c.hideHeader">
		<!--<h4 class="panel-title">{{data.tableLabel}} ${details}</h4>-->
    <h4 class="panel-title">{{data.tableLabel}}</h4>
	</div>
	<div class="panel-body">
		<div ng-if="data.fields.length > 0">
			<div class="row">
				<div ng-class="{'col-md-6' : field.column_name != 'description' && field.column_name != 'expected_outcome', {{::field.column_name}}: c.options.add_columnname_as_class && c.options.add_columnname_as_class == 'true'}" class="col-sm-12 col-xs-6 m-b" ng-repeat="field in data.fields" 
             ng-if="field.value && (field.type != 'decimal' || field.type == 'decimal' && field.value != 0)" >
					<label class="m-n">
						<strong>{{field.label}}</strong>
					</label>
          
          
          
          <div ng-if="field.column_name == 'u_customer_reference_id'" id="c1">
            <label class="m-n">
                 <strong>{{field.label}}</strong>
                  </label>
                       <div contenteditable>{{field.display_value || 'N/A'}}</div>
                           </div>
  				

                       
           
          
					<div ng-if="field.column_name == 'description' || field.column_name == 'expected_outcome'">
						<div ng-if="field.display_value.length > data.limit">{{ field.display_value | limitTo: data.limit }} ...
							<span aria-live="polite" class="m-b text-overflow-ellipsis">
								<a href="javascript&colon;void(0)" 
                  ng-click="c.openLargeInfo(${field.label}, ${field.display_value})">
                  Show more</a>
							</span>
						</div>
            
            
            
						<div ng-if="field.display_value.length <= data.limit">{{field.display_value}}</div>
            
					</div>
                  	<div ng-if="c.data.page_id== 'csm_case_task_ticket' && field.column_name == 'parent'">
						<div>
							<a href="javascript&colon;void(0)" ng-click="c.parentRedirect(c.data.parent_case_url)"   >
                              {{field.display_value}}
                          </a>
						</div>
                      
                      
                      
                      
                      
                      
					</div>
					<div ng-if="field.column_name != 'description' && field.column_name != 'expected_outcome' && field.column_name != 'parent'" >  
						<span ng-switch="field.type">
							<div ng-switch-when="glide_date_time" title="{{field.display_value}}">
                              <div ng-if="field.label == 'Resolution SLA Due Date' ||  field.label == 'Negotiated Due Date' || field.label =='Release Date'">
                                {{field.display_value}}</div>
                              <div ng-if="field.label != 'Resolution SLA Due Date' &&  field.label != 'Negotiated Due Date' && field.label !='Release Date'">
                                
								<sn-time-ago timestamp="::field.value" /></div>
							</div>
							<div ng-switch-default >{{field.display_value}}</div>
              
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Vamshi_ch123_0-1697609934512.png

but when it has value after adding the above script it shows the field name twice. earlier the field name is not there in the box except the value to edit.

0 Helpfuls