Interview Questions asked recently.

[SandeepKSingh]

Scenario:- In Service Portal, there is one field named quantity having values: [1, 2, 3, 4, 5]. Based on the quantity, the color will change and this should be done only using one class?

[Ravi Gaurav · Accepted solution]

Hi @SandeepKSingh 

1. HTML Markup

In your Service Portal widget or page, include a dropdown or display for the quantity field. Add a single class (e.g., quantity-display) and a data attribute to hold the quantity value.

<div class="quantity-display" data-quantity="{{c.quantity}}">
{{c.quantity}}
</div>

Update the data-quantity attribute dynamically if the quantity changes.

function($scope) {
$scope.c = {
quantity: 1 // Default quantity value
};

// Watch for changes in quantity and update the attribute
$scope.$watch('c.quantity', function(newVal) {
const element = document.querySelector('.quantity-display');
if (element) {
element.setAttribute('data-quantity', newVal);
}
});
}

Use a single class (quantity-display) and rely on the data-quantity attribute with CSS variables to set colors dynamically.

/* Define CSS variables based on the quantity */
.quantity-display[data-quantity="1"] {
--quantity-color: red;
}

.quantity-display[data-quantity="2"] {
--quantity-color: orange;
}

.quantity-display[data-quantity="3"] {
--quantity-color: yellow;
}

.quantity-display[data-quantity="4"] {
--quantity-color: green;
}

.quantity-display[data-quantity="5"] {
--quantity-color: blue;
}

/* Apply the color dynamically */
.quantity-display {
color: var(--quantity-color);
font-size: 20px; /* Example styling */
font-weight: bold;
}

[vishwajeet5550]

What is ServiceNow, and how does it work?

What are the different types of records in ServiceNow?

What is the ServiceNow CMDB ?

What is GlideRecord in ServiceNow?

[Ravi Gaurav · Accepted solution]

Hi @SandeepKSingh 

1. HTML Markup

In your Service Portal widget or page, include a dropdown or display for the quantity field. Add a single class (e.g., quantity-display) and a data attribute to hold the quantity value.

<div class="quantity-display" data-quantity="{{c.quantity}}">
{{c.quantity}}
</div>

Update the data-quantity attribute dynamically if the quantity changes.

function($scope) {
$scope.c = {
quantity: 1 // Default quantity value
};

// Watch for changes in quantity and update the attribute
$scope.$watch('c.quantity', function(newVal) {
const element = document.querySelector('.quantity-display');
if (element) {
element.setAttribute('data-quantity', newVal);
}
});
}

Use a single class (quantity-display) and rely on the data-quantity attribute with CSS variables to set colors dynamically.

/* Define CSS variables based on the quantity */
.quantity-display[data-quantity="1"] {
--quantity-color: red;
}

.quantity-display[data-quantity="2"] {
--quantity-color: orange;
}

.quantity-display[data-quantity="3"] {
--quantity-color: yellow;
}

.quantity-display[data-quantity="4"] {
--quantity-color: green;
}

.quantity-display[data-quantity="5"] {
--quantity-color: blue;
}

/* Apply the color dynamically */
.quantity-display {
color: var(--quantity-color);
font-size: 20px; /* Example styling */
font-weight: bold;
}

[yago · Accepted solution]

HTML Template:

<input 
  type="number" 
  ng-model="c.quantity" 
  min="1" 
  max="5" 
  ng-change="c.updateQuantity()" 
  class="quantity-field" 
/>

<div 
  class="quantity-display" 
  data-quantity="{{c.quantity}}">
  This is a quantity display. {{c.quantity}}
</div>

SCSS:

.quantity-display {
  color: black;

  $colors: red, green, blue, yellow, purple;

  @for $i from 1 through length($colors) {
    &[data-quantity="#{$i}"] {
      color: nth($colors, $i);
    }
  }
}

Client Script:

api.controller = function () {
  var c = this;
  c.quantity = 1; 

  c.updateQuantity = function () {
    if (c.quantity < 1 || c.quantity > 5) {
      c.quantity = '';
    }
  };
};