How to copy values from a field in the input tag or textarea tag in modal widget

[Reddy]

Hello,

I'm currently working on a portal widget to update catalog items from the portal. My script is functioning, but I'm facing an issue: when I click on the edit option, a modal box appears to update the catalog item fields. However, I'm unable to copy the catalog item field values into the modal box. Please see the details below.

I changed ng-model from "c.data.myitemnameModel[catalogItemname]" to "catalogItem.name." The values are copied to the modal popup, but when I hit the update button, the new values do not update the respective catalog item fields.

HTML:

            <div class="mb-3">
                        <!-- Catalog Item Name -->
                        <label for="catalogItemName" class="form-label" href="sc_cat_item.do?sys_id={{catalogItemValue.sys_id}}" target="_blank" style="font-weight: bold; font-size: 16px;">Catalog Item Name</label>
                        <!-- Input for Catalog Item Name -->
                        <input class="form-control" name="myitemnameModel" type="text" id="{{catalogItemname}}" ng-model="c.data.myitemnameModel[catalogItemname]" value="{{catalogItem.name}}" placeholder="Enter Catalog Item Name">
                    </div>

                    <div class="mb-3">
                        <!-- Category -->
                        <label for="catalogItemCategory" class="form-label" style="font-weight: bold; font-size: 16px;">Category</label>
                        <!-- Input for Category -->
                        <input class="form-control" name="myscategoryModel" type="text" id="{{catalogItemCategory}}" ng-model="c.data.myscategoryModel[catalogItemCategory]" value="{{catalogItem.category}}" placeholder="Enter category name">
                    </div>

                    <div class="mb-3">
                        <!-- Short Description -->
                        <label for="catalogItemCategory" class="form-label" style="font-weight: bold; font-size: 16px;">Short Description</label>
                        <!-- Input for Short Description -->
                        <input class="form-control" name="mysdescModel" type="text" id="{{catalogItemShortDescription}}" value="{{catalogItem.short_description}}" ng-model="c.data.mysdescModel[catalogItemShortDescription]" placeholder="Enter Short description">
                    </div>

                    <div class="mb-3">
                        <!-- Description -->
                        <label for="catalogItemDescription" class="form-label" style="font-weight: bold; font-size: 16px;">Description</label>
                        <!-- Textarea for Description -->
                        <textarea class="form-control" name="mydescModel" id="{{catalogItemDescription}}" ng-model="c.data.mydescModel[catalogItemDescription]" placeholder="Enter description" style="resize: both; height: 100px;"></textarea>
                    </div>

                    <div class="mb-3">
                        <!-- Variable Information -->
                        <label for="catalogItemvariable" class="form-label" style="font-weight: bold; font-size: 16px;">Variable</label>
                        <!-- Textarea for Variable -->
                        <textarea class="form-control" name="myitemvariableModel" id="{{catalogItemvariable}}" ng-model="c.data.myitemvariableModel[catalogItemvariable]" placeholder="Enter Variable Information" style="resize: both; height: 100px;"></textarea>
                    </div>

                    <div class="mb-3">
                        <!-- Price -->
                        <label for="catalogItemPrice" class="form-label" style="font-weight: bold; font-size: 16px;">Price</label>
                        <!-- Input for Price -->
                        <h5>
                            <input name="myInputModel" type="number" id="{{catalogItem.sys_id}}" ng-model="c.data.myInputModel[$index]" value="{{catalogItem.price}}" placeholder="Enter price">
                        </h5>
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <!-- Close Modal Button -->
                <button type="button" class="btn btn-secondary" ng-click="closeModal()">Close</button>
                <!-- Update Catalog Item Button -->
                <button type="button" class="btn btn-primary" ng-click="updatePrice(catalogItem.sys_id,catalogItemDescription,catalogItemShortDescription,catalogItemImageUpload,catalogItemCategory)">Update</button>
            </div>
        </div>
    </div>
</div>

Client:

 // Function to update catalog item price and details, with confirmation
    $scope.updatePrice = function(newPrice, catItemName, sysiD, value, index, priceValue, OldPrice, catalogItemDescription, catalogItemShortDescription, catalogItemname, catalogItemvariable, catalogItemCategory) {
        if (!confirm("Are you sure you want to update?")) {
            return; // If the user cancels, do nothing
        }

        // Upload the image file (if any) and proceed with update
        $scope.uploadFiles(function(imageSysId) {
            // Update the data model with new values
            c.data.selected = $scope.selection;
            c.data.newPrice = newPrice;
            c.data.sysID = sysiD;
            c.data.value = value;
            c.data.index = index;
            c.data.catalogItemDescription = catalogItemDescription;
            c.data.catalogItemShortDescription = catalogItemShortDescription;
            c.data.catalogItemname = catalogItemname;
            c.data.catalogItemCategory = catalogItemCategory;
            c.data.catalogItemvariable = catalogItemvariable;
            c.data.imageSysId = imageSysId; // Attach uploaded image sys_id to data model
        });

        // Send updated data to the server and refresh the page
        c.server.update(c.data).then(function() {
            $('#editCatalogItemModal').modal('hide'); // Hide the modal after update
            setTimeout(function() {
                location.reload(); // Reload the page after a short delay
            }, 1000);
        });

        spUtil.update($scope); // Utility method for updating the scope
    };

    // Function to open modal for editing a catalog item
    $scope.editCatalogItem = function(catalogItemValue) {
        $scope.catalogItem = angular.copy(catalogItemValue); // Create a copy of the catalog item data
        c.data.rec_sysid = catalogItemValue.sys_id; // Assign sys_id to c.data.rec_sysid for further operations
        $('#editCatalogItemModal').modal('show'); // Show the modal for editing
    };
}

Server:

 // Create a GlideRecord object to query the 'sc_cat_item' table
  var gr = new GlideRecord('sc_cat_item');

  gr.orderBy('category'); // Order the results by the category field

  gr.addActiveQuery(); // Only fetch active records

  // Add encoded query to filter records based on multiple conditions
  gr.addEncodedQuery("type!=bundle^sys_class_name!=sc_cat_item_guide^type!=package^sys_class_name!=sc_cat_item_content^active=true^sc_catalogs=e0d08b13c3330100c8b837659bba8fb4^price!=javascript:global.getCurrencyFilter('sc_cat_item','price', 'USD;0')^ORprice=NULL");

  gr.query(); // Execute the query

  // Iterate through all records returned by the query
  while(gr.next()){
    // Fetch and clean the description (remove HTML tags)
    var description = gr.getValue('description') || '';
    var cleanDescription = description.replace(/<[^>]*>?/gm, ''); // Strip HTML tags

    // Create a new object to store catalog item details
    var catalogItemValue = {};

    catalogItemValue.name = gr.getDisplayValue('name'); // Catalog item name
    catalogItemValue.category = gr.getDisplayValue('category'); // Catalog item category
    catalogItemValue.price = gr.getValue('price'); // Catalog item price
    catalogItemValue.sys_id = gr.getUniqueValue(); // Catalog item sys_id
    catalogItemValue.short_description = gr.getValue('short_description'); // Short description
    catalogItemValue.description = cleanDescription; // Cleaned description
    catalogItemValue.pic = gr.getDisplayValue('picture'); // Picture associated with the catalog item

    // Fetch default value from the item_option_new table
    var itemOptionGR = new GlideRecord('item_option_new');
    itemOptionGR.addQuery('cat_item', gr.getUniqueValue()); // Query for the item option associated with the catalog item
    itemOptionGR.query(); // Execute the query

    // If the item option is found, fetch the default value
    if (itemOptionGR.next()) {
      catalogItemValue.newInfo = itemOptionGR.getValue('default_value'); // Default value
    } else {
      catalogItemValue.newInfo = "No Info Available"; // If no item option, set default text
    }

    // Push the catalog item data to the incidents array
    data.incidents.push(catalogItemValue);
  }
 
  // Update logic for price, description, short description, name, and category (based on input parameters)
  if (input.newPrice || input.catalogItemDescription || input.catalogItemShortDescription || input.catalogItemname || input.catalogItemvariable || input.catalogItemCategory) {

    var gr1 = new GlideRecord('sc_cat_item');

    // Check if the catalog item exists with the given input
    if (gr1.get(input.newPrice || input.catalogItemDescription || input.catalogItemShortDescription || input.catalogItemname || input.catalogItemvariable || input.catalogItemCategory)) {

      // Update the catalog item fields based on the input values
      if (input.myInputModel && input.myInputModel[input.index]) {
        gr1.price = input.myInputModel[input.index];  // Update price
      }

      if (input.mydescModel && input.mydescModel[input.catalogItemDescription]) {
        gr1.description = input.mydescModel[input.catalogItemDescription]; // Update description
      }

      if (input.mysdescModel && input.mysdescModel[input.catalogItemShortDescription]) {
        gr1.short_description = input.mysdescModel[input.catalogItemShortDescription]; // Update short description
      }

      if (input.myitemnameModel && input.myitemnameModel[input.catalogItemname]) {
        gr1.name = input.myitemnameModel[input.catalogItemname]; // Update name
      }

      if (input.myitemvariableModel && input.myitemvariableModel[input.catalogItemvariable]) {
        gr1.u_variable_information = input.myitemvariableModel[input.catalogItemvariable]; // Update variable information
      }

      // Update catalog item category if a category value is provided
      if (input.myscategoryModel && input.myscategoryModel[input.catalogItemCategory]) {
        var categoryName = input.myscategoryModel[input.catalogItemCategory];
        var categoryGR = new GlideRecord('sc_category');
        categoryGR.addQuery('title', categoryName); // Query category by title
        categoryGR.query(); // Execute the query
        
        if (categoryGR.next()) {
          gr1.category = categoryGR.sys_id.toString(); // Set the sys_id of the found category
        } else {
          gs.error("Category not found: " + categoryName); // Log an error if category is not found
        }
      }

      // Update the catalog item record in the database
      gr1.update();
    }
  }

})();

[Ankur Bawiskar · Accepted solution]

@Reddy 

can you try this

HTML:

<div class="mb-3">
    <label for="catalogItemName" class="form-label" href="sc_cat_item.do?sys_id={{catalogItemValue.sys_id}}" target="_blank" style="font-weight: bold; font-size: 16px;">Catalog Item Name</label>
    <input class="form-control" name="myitemnameModel" type="text" id="{{catalogItemname}}" ng-model="catalogItem.name" placeholder="Enter Catalog Item Name">
</div>

<div class="mb-3">
    <label for="catalogItemCategory" class="form-label" style="font-weight: bold; font-size: 16px;">Category</label>
    <input class="form-control" name="myscategoryModel" type="text" id="{{catalogItemCategory}}" ng-model="catalogItem.category" placeholder="Enter category name">
</div>

<div class="mb-3">
    <label for="catalogItemShortDescription" class="form-label" style="font-weight: bold; font-size: 16px;">Short Description</label>
    <input class="form-control" name="mysdescModel" type="text" id="{{catalogItemShortDescription}}" ng-model="catalogItem.short_description" placeholder="Enter Short description">
</div>

<div class="mb-3">
    <label for="catalogItemDescription" class="form-label" style="font-weight: bold; font-size: 16px;">Description</label>
    <textarea class="form-control" name="mydescModel" id="{{catalogItemDescription}}" ng-model="catalogItem.description" placeholder="Enter description" style="resize: both; height: 100px;"></textarea>
</div>

<div class="mb-3">
    <label for="catalogItemvariable" class="form-label" style="font-weight: bold; font-size: 16px;">Variable</label>
    <textarea class="form-control" name="myitemvariableModel" id="{{catalogItemvariable}}" ng-model="catalogItem.variable" placeholder="Enter Variable Information" style="resize: both; height: 100px;"></textarea>
</div>

<div class="mb-3">
    <label for="catalogItemPrice" class="form-label" style="font-weight: bold; font-size: 16px;">Price</label>
    <h5>
        <input name="myInputModel" type="number" id="{{catalogItem.sys_id}}" ng-model="catalogItem.price" placeholder="Enter price">
    </h5>
</div>

<div class="modal-footer">
    <button type="button" class="btn btn-secondary" ng-click="closeModal()">Close</button>
    <button type="button" class="btn btn-primary" ng-click="updatePrice(catalogItem)">Update</button>
</div>

Client:

$scope.updatePrice = function(catalogItem) {
    if (!confirm("Are you sure you want to update?")) {
        return; // If the user cancels, do nothing
    }

    // Upload the image file (if any) and proceed with update
    $scope.uploadFiles(function(imageSysId) {
        // Update the data model with new values
        c.data.catalogItem = catalogItem;
        c.data.catalogItem.imageSysId = imageSysId; // Attach uploaded image sys_id to data model

        // Send updated data to the server and refresh the page
        c.server.update(c.data).then(function() {
            $('#editCatalogItemModal').modal('hide'); // Hide the modal after update
            setTimeout(function() {
                location.reload(); // Reload the page after a short delay
            }, 1000);
        });

        spUtil.update($scope); // Utility method for updating the scope
    });
};

// Function to open modal for editing a catalog item
$scope.editCatalogItem = function(catalogItemValue) {
    $scope.catalogItem = angular.copy(catalogItemValue); // Create a copy of the catalog item data
    $('#editCatalogItemModal').modal('show'); // Show the modal for editing
};

Server:

(function() {
  // Create a GlideRecord object to query the 'sc_cat_item' table
  var gr = new GlideRecord('sc_cat_item');

  gr.orderBy('category'); // Order the results by the category field
  gr.addActiveQuery(); // Only fetch active records

  // Add encoded query to filter records based on multiple conditions
  gr.addEncodedQuery("type!=bundle^sys_class_name!=sc_cat_item_guide^type!=package^sys_class_name!=sc_cat_item_content^active=true^sc_catalogs=e0d08b13c3330100c8b837659bba8fb4^price!=javascript:global.getCurrencyFilter('sc_cat_item','price', 'USD;0')^ORprice=NULL");

  gr.query(); // Execute the query

  // Iterate through all records returned by the query
  while(gr.next()){
    // Fetch and clean the description (remove HTML tags)
    var description = gr.getValue('description') || '';
    var cleanDescription = description.replace(/<[^>]*>?/gm, ''); // Strip HTML tags

    // Create a new object to store catalog item details
    var catalogItemValue = {};

    catalogItemValue.name = gr.getDisplayValue('name'); // Catalog item name
    catalogItemValue.category = gr.getDisplayValue('category'); // Catalog item category
    catalogItemValue.price = gr.getValue('price'); // Catalog item price
    catalogItemValue.sys_id = gr.getUniqueValue(); // Catalog item sys_id
    catalogItemValue.short_description = gr.getValue('short_description'); // Short description
    catalogItemValue.description = cleanDescription; // Cleaned description
    catalogItemValue.pic = gr.getDisplayValue('picture'); // Picture associated with the catalog item

    // Fetch default value from the item_option_new table
    var itemOptionGR = new GlideRecord('item_option_new');
    itemOptionGR.addQuery('cat_item', gr.getUniqueValue()); // Query for the item option associated with the catalog item
    itemOptionGR.query(); // Execute the query

    // If the item option is found, fetch the default value
    if (itemOptionGR.next()) {
      catalogItemValue.newInfo = itemOptionGR.getValue('default_value'); // Default value
    } else {
      catalogItemValue.newInfo = "No Info Available"; // If no item option, set default text
    }

    // Push the catalog item data to the incidents array
    data.incidents.push(catalogItemValue);
  }

  // Update logic for price, description, short description, name, and category (based on input parameters)
  if (input.catalogItem) {
    var gr1 = new GlideRecord('sc_cat_item');

    // Check if the catalog item exists with the given sys_id
    if (gr1.get(input.catalogItem.sys_id)) {
      // Update the catalog item fields based on the input values
      if (input.catalogItem.price) {
        gr1.price = input.catalogItem.price;  // Update price
      }

      if (input.catalogItem.description) {
        gr1.description = input.catalogItem.description; // Update description
      }

      if (input.catalogItem.short_description) {
        gr1.short_description = input.catalogItem.short_description; // Update short description
      }

      if (input.catalogItem.name) {
        gr1.name = input.catalogItem.name; // Update name
      }

      if (input.catalogItem.variable) {
        gr1.u_variable_information = input.catalogItem.variable; // Update variable information
      }

      // Update catalog item category if a category value is provided
      if (input.catalogItem.category) {
        var categoryName = input.catalogItem.category;
        var categoryGR = new GlideRecord('sc_category');
        categoryGR.addQuery('title', categoryName); // Query category by title
        categoryGR.query(); // Execute the query
        
        if (categoryGR.next()) {
          gr1.category = categoryGR.sys_id.toString(); // Set the sys_id of the found category
        } else {
          gs.error("Category not found: " + categoryName); // Log an error if category is not found
        }
      }

      // Update the catalog item record in the database
      gr1.update();
    }
  }
})();

If my response helped please mark it correct and close the thread so that it benefits future readers.