Auto-Populate Catalog Item Variable from Custom Widget Record Selection

[omar_adam10]

Hello,

I have created a custom widget that displays a list of records. Each record card contains a button that redirects the user to a catalog item. This catalog item has a variable that references the same list of records used in the custom widget.

What I want to achieve: When a user clicks the button on a record card in the custom widget and is redirected to the catalog item, the variable on the catalog item should be auto-populated with the data from the record that was clicked.

HTML Template of the widget

<section class="workspace-section">

  <div class="section-header">
    <h2>Available Workspaces</h2>
    <p>
      Choose from a variety of workspaces designed for focus,
      collaboration, and productivity.
    </p>
  </div>

  <div class="workspace-container">
    <div class="workspace-card" ng-repeat="ws in c.data.workspaces">
      <img ng-src="{{ws.image}}" class="workspace-image">

      <div class="workspace-content">
        <h4>{{ws.name}}</h4>
        <p><strong>Type:</strong> {{ws.type}}</p>
        <p><strong>Location:</strong> {{ws.location}}</p>
        <p><strong>Max Occupancy:</strong> {{ws.max_occupancy}}</p>
        <div  class="workspace-btn">
           <a type="button" ng-click="c.openCatalog()">Reserve</a>
        </div>
      </div>
    </div>
  </div>

  <p ng-if="c.data.workspaces.length === 0" class="empty-state">
    No workspaces currently available.
  </p>

</section>

Client Script

api.controller=function($scope) {
  /* widget controller */
  var c = this;
	c.catalogUrl = '?id=sc_cat_item&sys_id=------------------------------------------'; 

  c.openCatalog = function() {
  // Redirect to the catalog item in the same tab
   window.location.href = c.catalogUrl;
		};
};

Server Script

(function() {
 var workspaces = [];
 var gr = new GlideRecord('x_-------_www_workspace_options');
 gr.addQuery('status', 'available');
 gr.orderBy('workspace_name');
 gr.query();
 while (gr.next()) {
 workspaces.push({
 sys_id: gr.getUniqueValue(),
 name: gr.getValue('workspace_name'),
 type: gr.getDisplayValue('workspace_type'),
 location: gr.getDisplayValue('location'),
 status: gr.getDisplayValue('status'),
 max_occupancy: gr.getValue('max_occupancy'),
 image: gr.getDisplayValue('image')
 });
 }
 data.workspaces = workspaces;
})();