contentstack · rahul-contentstack · Feb 17, 2026 · Feb 13, 2026 · Feb 16, 2026 · Feb 16, 2026
@@ -16,13 +16,14 @@ gulp.task('js', function () {
     .pipe(gulp.dest('./src/dist'));
 });
 gulp.task('inline', function () {
+  var options = {
+    rootpath: require('path').resolve(__dirname, 'src'),
+    compress: false,
+    attribute: 'inline'
+  };
   return gulp
     .src('./src/index.html')
-    .pipe(
-      inlineSource({
-        compress: true
-      })
-    )
+    .pipe(inlineSource(options))
     .pipe(gulp.dest('./'));
 });
 gulp.task('watch', function () {

@@ -4,11 +4,14 @@
 <head>
     <meta charset="UTF-8">
     <title>External API Lookup Template</title>
-    <style type="text/css" media="all">body{line-height:1}</style>
+    <style type="text/css" media="all">body {
+  line-height: 1;
+}
+</style>
     <link href="https://www.contentstack.com/sdks/contentstack-ui-extensions/dist/latest/ui-extension-sdk.css" rel="stylesheet" type="text/css" media="all">
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
     <script src="https://www.contentstack.com/sdks/contentstack-ui-extensions/dist/latest/ui-extension-sdk.js"></script>
-    <script type="text/javascript" src="https://code.jquery.com/jquery-1.x-git.min.js"></script>
+    <script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
 </head>
 <body>
@@ -18,7 +21,106 @@
             </select>
         </div>
     </form>
-    <script>undefined</script>
+    <script>"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(a, n) { if (!(a instanceof n)) throw new TypeError("Cannot call a class as a function"); }
+function _defineProperties(e, r) { for (var t = 0; t < r.length; t++) { var o = r[t]; o.enumerable = o.enumerable || !1, o.configurable = !0, "value" in o && (o.writable = !0), Object.defineProperty(e, _toPropertyKey(o.key), o); } }
+function _createClass(e, r, t) { return r && _defineProperties(e.prototype, r), t && _defineProperties(e, t), Object.defineProperty(e, "prototype", { writable: !1 }), e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var extensionField;
+var Request = /*#__PURE__*/function () {
+  function Request() {
+    var config = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    _classCallCheck(this, Request);
+    this.url = config.url || 'https://reqres.in/api/users';
+    this.configArg1 = config.configArg1 || '';
+    this.configArg2 = config.configArg2 || '';
+  }
+  _createClass(Request, [{
+    key: "get",
+    value: function get() {
+      var request = this;
+      var statusCode;
+      return new Promise(function (resolve, reject) {
+        fetch(request.url, {
+          method: 'GET'
+        }).then(function (response) {
+          statusCode = response.status;
+          return response.json();
+        }).then(function (response) {
+          if (statusCode === 200) resolve(response);
+          throw Error('Failed to fetch resource');
+        })["catch"](function (err) {
+          reject(err);
+        });
+      });
+    }
+  }, {
+    key: "search",
+    value: function search(keyword) {
+      // sample search function for advance implementation
+      var request = this;
+      var statusCode;
+      return new Promise(function (resolve, reject) {
+        fetch("".concat(request.url, "?keyword=").concat(keyword), {
+          method: 'GET'
+        }).then(function (response) {
+          statusCode = response.status;
+          return response.json();
+        }).then(function (response) {
+          if (statusCode === 200) resolve(response);
+          throw Error('Failed to fetch resource');
+        })["catch"](function (err) {
+          reject(err);
+        });
+      });
+    }
+  }]);
+  return Request;
+}();
+function domChangeListner() {
+  $('#resource-select').on('change', function () {
+    var fieldValue = $('#resource-select').val();
+    return extensionField.field.setData(fieldValue);
+  });
+}
+function render(response) {
+  //  to get previously selected
+  var fieldData = extensionField.field.getData();
+
+  // Handle different response formats
+  // reqres.in returns { data: [...] }, jsonplaceholder returns [...] directly
+  var users = Array.isArray(response) ? response : response.data || [];
+  users.forEach(function (dataSet) {
+    // Handle different field names: first_name/last_name (reqres) vs name (jsonplaceholder)
+    var displayName = dataSet.name || "".concat(dataSet.first_name || '', " ").concat(dataSet.last_name || '').trim();
+    var option = $('<option></option>').attr('value', dataSet.id).text(displayName);
+    if (fieldData === dataSet.id.toString()) {
+      option.attr('selected', 'selected');
+    }
+    $('#resource-select').append(option);
+  });
+  // Step 3:  domChangeListner - Start listner on select field to set data for field
+  // on selection change
+  domChangeListner();
+}
+$(document).ready(function () {
+  // Step:1 Intializing extension - In this step we try to connect to host
+  //  window using postMessage API and get intial data.
+
+  ContentstackUIExtension.init().then(function (extension) {
+    // current extension object
+    extensionField = extension;
+    var request = new Request(extension.config); // initialize request object using config
+    request.get().then(function (response) {
+      // Step 2:  Render - Render the data fetched from external service
+      render(response);
+    });
+    extensionField.window.enableAutoResizing();
+  });
+});</script>
 </body>
 
 </html>