How to hide a field in widget??

[gokulraj]

Hello Team,

I want to hide the "Justification" field when the "Requested for" field is empty. But this is widget how to do this??

[Ravi T]

This is a catalog item form or html fields?

[gokulraj]

HTML fields.

below is the HTML code

<div>
<div ng-show="c.data.cartItems.length > 0" class="panel panel-primary b">
<table id="cart" class="table table-hover table-condensed">
<thead>
<tr>
<th style="width: 52%;">${Product}</th>
<th style="width: 10%;">${Price}</th>
<th style="width: 8%;">${Quantity}</th>
<th style="width: 10%;">${Subtotal}</th>
<th style="width: 10%;"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="item in c.data.cartItems track by item.sys_id | orderBy: 'order'">
<td data-th="Product">
<div class="row" ng-model="c.product">
<div class="col-sm-2 hidden-xs"><img ng-show="item.picture" ng-src="{{item.picture}}" alt="..." class="img-responsive item-image"/></div>
<div class="col-sm-10">
<h4 class="nomargin"><a ng-href="?id=sc_cat_item&sys_id={{item.item_id}}">{{item.name}}</a></h4>
<p class="hidden-xs">{{item.short_description}}</p>
</div>
</div>
</td>
<td>
<strong>{{item.display_price}}</strong>
<div ng-show="item.recurring_price > 0">+ {{item.display_recurring_price}} {{item.recurring_frequency_display}}</div>
</td>
<td data-th="Quantity">
<input type="number"
ng-if="item.show_quantity"
class="form-control text-center"
ng-model="item.quantity"
min="1"
max="99"
ng-model-options="{ updateOn: 'blur' }"
ng-change="c.updateQuantity(item)">
<span ng-if="!item.show_quantity">-</span>
</td>
<td>
<strong>{{item.subtotal_price}}</strong>
<div ng-show="item.recurring_subtotal > 0">+ {{item.recurring_subtotal_price}} {{item.recurring_frequency_display}}</div>
</td>
<td class="actions" data-th="">
<button class="btn btn-info btn-sm" ng-show="item.has_options" ng-click="c.editItem(item.sys_id)"><i class="fa fa-pencil"></i></button>
<button class="btn btn-danger btn-sm" ng-click="c.removeItem($event, item)"><i class="fa fa-trash-o"></i></button>
</td>
</tr>
</tbody>
</table>

<div class="panel-footer clearfix">
<div class="pull-right">
<h4 class="text-bold">${Total price}: {{c.data.cart.display_subtotal}}</h4>
<h5 class="text-bold" ng-repeat="(key, value) in c.data.cart.recurring_subtotals">+ {{value}} {{key}}</h5>
</div>

</div>
</div>
<div>
<p><b>${"If you are requesting this on behalf of someone else, add the item to your cart and change the Requestor to that other person"}</b></p>
</div>
<div class="panel b" ng-show="c.data.cartItems.length > 0">
<div class="order-details-container form-group">
<div class="order-details requested-for-details">
<div>
<span class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': field.mandatory_filled()}" style="padding-right: .25em" aria-label="Mandatory " aria-hidden="false"></span>
<label>${Requested For}</label>
<sn-record-picker field="c.requestedFor" table="'sys_user'" display-field="'name'" display-fields="'email'" value-field="'sys_id'" search-fields="'name'" page-size="100" default-query="'active=true'"></sn-record-picker>
</div>
<div>
<span class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': field.mandatory_filled()}" style="padding-right: .25em" aria-label="Mandatory " aria-hidden="false"></span>
<label>${Deliver To}</label>
<textarea class="form-control" ng-model="c.deliverTo"></textarea>
</div>
<div>
<span class="fa fa-asterisk mandatory" ng-class="{'mandatory-filled': field.mandatory_filled()}" style="padding-right: .25em" aria-label="Mandatory " aria-hidden="false"></span>
<label>${Justification}</label>
<textarea class="form-control" ng-model="c.justification"></textarea>
</div>
</div>
<div class="order-details special-instructions-details">
<label>${Special Instructions}</label>
<textarea class="form-control" ng-model="c.additionalDetails"></textarea>
</div>
</div>
<div class="panel-footer">
<a href="?id=sc_home" name="submit" ng-click="triggerOnSubmit()" class="btn btn-default m-r-xs">${Continue Shopping}</a>
<button ng-disabled="c.checkoutInProgress" name="submit" ng-click="c.triggerCheckout($event)" class="btn btn-primary m-l-xs pull-right">
<span ng-show="!c.checkoutInProgress">${Checkout}</span>
<span ng-show="c.checkoutInProgress">${Ordering...}</span>
</button>
<a class="btn btn-default"
ng-click="c.saveBundle()">${Save as Bundle}</a>
</div>
</div>

<div ng-show="c.data.cartItems.length == 0" class="panel panel-default b">
<div class="panel-body">
<div class="empty-state-content">
<span class="fa fa-shopping-cart"></span>
<h3>${Your shopping cart is empty}</h3>
<p>${Once you have added items to your shopping cart, you can check out from here.}</p>
<a class="btn btn-primary" href="?id=sc_home">${View the Catalog}</a>
</div>
</div>
</div>
</div>

[Ravi T]

Hii

<label>${Justification}</label>
<textarea class="form-control" ng-model="c.justification"></textarea>
</div>
</div>
<div class="order-details special-instructions-details">
<label>${Special Instructions}</label>
<textarea class="form-control" ng-model="c.additionalDetails"></textarea>

Write the abvoe code into a div with id 

<div id='xyz'>

<label>${Justification}</label>
<textarea class="form-control" ng-model="c.justification"></textarea>
</div>
</div>
<div class="order-details special-instructions-details">
<label>${Special Instructions}</label>
<textarea class="form-control" ng-model="c.additionalDetails"></textarea>

</div>

And in client script write the below code

If(c.name.displayValue=='')

{

var x = document.getElementById("xyz");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }

}

[Ravi T]

Did you try this? If it worked for you Mark it correct and close the thread