With K2's new web component/custom control framework, we can now build our own native-like SmartForm controls. It's an exceptionally well-built feature that really does break down any limitations you might hit with out-of-the-box functionality. And for the developer, it feels like a native control. It works with all the layouts, rules, validations, conditions, and everything else you'd expect.

But here's the feedback I keep getting: "It's great… but it takes two weeks to build a control."

And my question back is always the same. Just vibe code it?

You can seriously deploy a control within 15 minutes.

If you've spoken to me or heard me talk about vibe coding before, you know where I stand. Vibe coding is the future, and it's getting better by the week. With the release of Claude's Opus 4.6 and its multi-agent capabilities, we're seeing a real showcase of what's in store. It seriously turns anyone with some development skills into a technical architect with a full development team at their fingertips.

This guide walks you through setting up Claude Code with the K2 SmartForm custom control framework (via the Dojo repo) and building a real control from scratch. Fast.

Getting Started: Download the Control Dojo

First, grab the Control Dojo from GitHub:

https://github.com/k2workflow/Control-Dojo

This will be our baseline development repo. The foundation we'll be vibe coding from. Save it in your dev folder and open it up with Visual Studio (or VS Code).

Before we touch the Claude config, let's follow K2's instructions for setting up the Dojo. We've already covered steps 1 through 3, so let's pick up from here.

Step 4: Install Dependencies

Open a terminal inside the Dojo folder and run:

bash

npm install

If you see errors:

Make sure you're in the correct folder (the terminal should show the Control Dojo folder path).
Ensure Node.js is installed correctly. Type node --version to check.
Try running the command again.

Step 5: Start the Application

Once npm install finishes, start both the frontend and backend components:

bash

npm run dev:full

You'll see output in the terminal as the servers spin up. When it's ready, look for messages like:

VITE ready in X ms
Server running on port 3001

Important: Keep this terminal window open while using the Control Dojo. Closing it will stop the application.

Step 6: Open Control Dojo in Your Browser

Open your web browser (Chrome, Firefox, Edge, etc.).
Navigate to: http://localhost:3000
You should now see the Control Dojo home page.

Troubleshooting:

If the page doesn't load, wait a few seconds and try again. The servers may still be starting.
Make sure you typed localhost:3000 correctly (no spaces, no www, no https://).
Check that the terminal shows the servers are running.
Try refreshing the page (F5 or Ctrl+R / Cmd+R).
As a very quick intro to the Dojo, this is where we can test our controls in full before deploying to K2. We can test inputs, toggle between design-time and runtime modes, test data binding and so on. It's actually a comprehensive testing tool, so don't skip it.ere.

Configuring Claude Code

Now we want to configure the Dojo to work with Claude Code.

If you're using VS Code, I would highly recommend downloading the Claude Code extension. If you're using Visual Studio, just open up the command prompt within Visual Studio and type claude. If it's not configured yet, run npm install -g @anthropic-ai/claude-code first.

Once Claude is open, run the following command to get everything initialized:

/init

This will run through the Dojo so Claude can understand the file structure and what's going on.

After the init has run, you'll see Claude has created a claude.md reference file. This is where each Claude session will be able to understand the repo.

Great, now everything is set up. All we need to do is some vibe coding to build what we want.

The Prompt Template

I've actually received a request from a customer to develop a task list control, where their users can use a checklist within a task before completing the K2 task.

We are going to use the Material 3 list control and customize it to have a checkbox to tick off items when completed. In K2, we can save the state of that checkbox within a SmartObject.

Let's do some vibe coding to build out this control. Here's my prompt template that I use. We will change this to align with my requirement.

You are building a Nintex K2 custom control for the Control Dojo platform. Follow these specifications exactly. 

FILE STRUCTURE
Every control lives in Controls/[Control Name]/ and requires these 7 files:
1.	manifest.json — Control configuration and metadata
2.	runtime_logic.js — Production JavaScript (runs in K2 runtime)
3.	runtime_style.css — Production styles
4.	designtime_logic.js — Designer preview JavaScript (runs in K2 designer)
5.	designtime_style.css — Designer preview styles
6.	icon.svg — Control icon for K2 toolbox
7.	README.md — Control documentation
 
MANIFEST.JSON
The manifest defines properties, events, and methods exposed to K2 SmartForms.
Root Structure
{ "icon": "icon.svg", "designtimeScriptFileNames": ["designtime_logic.js"], "runtimeScriptFileNames": ["runtime_logic.js"], "designtimeStyleFileNames": ["designtime_style.css"], "runtimeStyleFileNames": ["runtime_style.css"], "displayName": "Control Name", "tagName": "custom-element-tag", "description": "Description of the control", "supports": ["Value", "Width", "Height", "IsVisible", "IsEnabled", "IsReadOnly", "DataBinding"], "events": [], "properties": [], "methods": [] }
Supports Array
•	"Value" — The control has a bindable value
•	"Width" / "Height" — Dimension support
•	"IsVisible" / "IsEnabled" / "IsReadOnly" — Standard K2 state properties
•	"DataBinding" — Required if the control uses list data binding
•	"Property" — Generic property support
Property Types
// String property { "id": "PropertyName", "friendlyname": "Display Name", "type": "string", "refreshdisplay": "true", "inputlength": "255", "initialvalue": "", "changesdisplay": true, "description": "What this property does" }
// Dropdown property { "id": "Layout", "friendlyname": "Layout", "type": "drop", "refreshdisplay": "true", "initialvalue": "horizontal", "changesdisplay": true, "dropitems": [ { "value": "horizontal", "text": "Horizontal" }, { "value": "vertical", "text": "Vertical" } ] }
// List data binding property (for SmartObject binding) { "id": "List", "type": "listdata", "friendlyname": "List Items", "category": "Detail", "refreshdisplay": "true", "initialvalue": "[{"display": "Item 1", "value": "1"},{"display": "Item 2","value": "2"}]" }
CRITICAL K2 LIMITATIONS
•	Boolean type is NOT supported — Use "type": "string" with "initialvalue": "false". Parse with: val === true || val === 'true'
•	Property IDs cannot conflict with manifest root keys — e.g., can't have both "icon": "icon.svg" and a property "id": "icon"
Events
"events": [ { "id": "OnChanged", "friendlyname": "Changed" }, { "id": "OnButtonClick", "friendlyname": "Button Clicked" } ]
Methods
Methods use id and displayname (lowercase 'n'):
"methods": [ { "id": "clearSelection", "displayname": "Clear Selection", "returntype": "None", "parameters": [] }, { "id": "selectById", "displayname": "Select By ID", "returntype": "None", "parameters": [ { "name": "id", "type": "text" } ] } ]
 
RUNTIME_LOGIC.JS — FULL PATTERN
The runtime file is the core of the control. It runs inside the K2 SmartForms runtime.
Skeleton
// Safe K2 namespace if (typeof window.K2 === "undefined") { window.K2 = {}; }
// Safe wrapper for K2 property change notifications function safeRaisePropertyChanged(ctrl, prop) { if (window.K2?.RaisePropertyChanged) { K2.RaisePropertyChanged(ctrl, prop); } else { console.log([control-name] Property changed: ${prop} =, ctrl[prop]); } }
// Singleton registration guard if (!window.customElements.get('custom-element-tag')) { window.customElements.define('custom-element-tag', class ControlName extends K2BaseControl {
//#region Fields
_isVisible = true;
_isEnabled = true;
_isReadOnly = false;
_hasRendered = false;
_height = null;
_width = null;
//#endregion Fields

//#region Properties

get Value() { return this._value; }
set Value(v) {
  const oldValue = this._value;
  this._value = v || '';
  this.setAttribute('value', this._value);
  if (this._hasRendered) this._applyChanges();
  safeRaisePropertyChanged(this, 'Value');
  if (oldValue !== this._value) {
    this._fireChangedEvent(this._value, oldValue);
  }
}

get Height() { return this._height; }
set Height(val) {
  this._height = val;
  if (this._hasRendered && this.container) {
    const v = (val === undefined || val === null || val === '')
      ? '' : (isNaN(val) ? String(val) : `${val}px`);
    this.container.style.height = v;
  }
  safeRaisePropertyChanged(this, 'Height');
}

get Width() { return this._width; }
set Width(val) {
  this._width = val;
  if (this._hasRendered && this.container) {
    const v = (val === undefined || val === null || val === '')
      ? '' : (isNaN(val) ? String(val) : `${val}px`);
    this.container.style.width = v;
  }
  safeRaisePropertyChanged(this, 'Width');
}

get IsVisible() { return this._isVisible; }
set IsVisible(val) {
  this._isVisible = val === 'true' || val === true;
  this.setAttribute('isvisible', val);
  if (this._hasRendered && this.container) {
    this.container.style.display = this._isVisible ? '' : 'none';
  }
  safeRaisePropertyChanged(this, 'IsVisible');
}

get IsEnabled() { return this._isEnabled; }
set IsEnabled(val) {
  this._isEnabled = val === 'true' || val === true;
  this.setAttribute('isenabled', val);
  if (this._hasRendered) this.updateInteractivity();
  safeRaisePropertyChanged(this, 'IsEnabled');
}

get IsReadOnly() { return this._isReadOnly; }
set IsReadOnly(val) {
  this._isReadOnly = val === 'true' || val === true;
  this.setAttribute('isreadonly', this._isReadOnly ? 'true' : 'false');
  if (this._hasRendered) this.updateInteractivity();
  safeRaisePropertyChanged(this, 'IsReadOnly');
}

get CustomProp() { return this._customProp; }
set CustomProp(val) {
  this._customProp = val || 'default';
  this.setAttribute('customprop', this._customProp);
  if (this._hasRendered) this._applyChanges();
  safeRaisePropertyChanged(this, 'CustomProp');
}

//#endregion Properties

//#region Constructor

constructor() {
  super();
  this._isVisible = true;
  this._isEnabled = true;
  this._isReadOnly = false;
  this._hasRendered = false;
  this._height = null;
  this._width = null;
  this._value = '';
}

//#endregion Constructor

//#region Events

_fireChangedEvent(newValue, oldValue) {
  this.dispatchEvent(new CustomEvent("OnChanged", {
    detail: { value: newValue, oldValue: oldValue },
    bubbles: true
  }));
}

attachEventListeners() {
  super.attachEventListeners();
}

updateInteractivity() {
  if (!this.container) return;
  const interactive = this._isEnabled && !this._isReadOnly;
  this.container.style.pointerEvents = interactive ? '' : 'none';
  this.container.setAttribute('aria-disabled', interactive ? 'false' : 'true');
  this.container.classList.toggle('is-disabled', !this._isEnabled);
  this.container.classList.toggle('is-readonly', this._isReadOnly);
}

//#endregion Events

//#region K2 Attribute Handling

get observedAttributes() {
  const baseAttributes = super.observedAttributes || [];
  return [...baseAttributes, 'value', 'height', 'width',
    'isvisible', 'isenabled', 'isreadonly'];
}

onAttributeChanged(name, oldValue, newValue) {
  switch (name) {
    case "value": this.Value = newValue; break;
    case "height": this.Height = newValue; break;
    case "width": this.Width = newValue; break;
    case "isvisible": this.IsVisible = newValue; break;
    case "isenabled": this.IsEnabled = newValue; break;
    case "isreadonly": this.IsReadOnly = newValue; break;
    default: super.onAttributeChanged(name, oldValue, newValue); break;
  }
}

//#endregion K2 Attribute Handling

//#region Lifecycle

connectedCallback() {
  super.connectedCallback();
  if (!this._hasRendered) {
    this.render();
  }
}

disconnectedCallback() {
  super.disconnectedCallback();
}

render() {
  if (this._hasRendered) return;
  this.ensureShadow();
  this._shadow.innerHTML = `<div class="control-container"></div>`;
  this.container = this._shadow.querySelector('.control-container');
  this._hasRendered = true;
  this.updateInteractivity();
  this.attachEventListeners();
}

//#endregion Lifecycle

//#region Method Execution

execute(objInfo = {}) {
  const method = objInfo?.methodName;
  switch (method) {
    case 'clearSelection':
      this.clearSelection();
      break;
    case 'selectById':
      this.selectById(objInfo?.parameters?.id);
      break;
  }
  return "";
}

//#endregion Method Execution
}); }
 
K2 LIST DATA BINDING PATTERN
For controls that display collections of items bound to SmartObjects.
Manifest Requirements
Add to "supports": "DataBinding"
Add a listdata property:
{ "id": "List", "type": "listdata", "friendlyname": "List Items", "category": "Detail", "refreshdisplay": "true", "initialvalue": "[{"display": "Item 1", "value": "1"}]" }
Runtime Implementation
_listConfig = { partmappings: {} }; _dataItems = []; _items = [];
listConfigChangedCallback(config, listname) { this._listConfig = config; this._setItems(this._dataItems); }
listItemsChangedCallback(itemsChangedEventArgs) { const isDesignTime = window.K2?.IsDesigner === true; let itemsToProcess = itemsChangedEventArgs.NewItems;
if (isDesignTime && (!Array.isArray(itemsToProcess) || itemsToProcess.length === 0)) { try { itemsToProcess = JSON.parse(this._initialListValue); } catch (error) { console.error('[Control] Error parsing fallback:', error); } }
if (Array.isArray(itemsToProcess)) { this._dataItems = itemsToProcess; this._setItems(this._dataItems); } }
_setItems(items) { this._items = []; if (!Array.isArray(items)) return;
let displayproperty = "display"; let valueproperty = "value";
if (this._listConfig?.partmappings) { displayproperty = this._listConfig.partmappings["Display"] || "display"; valueproperty = this._listConfig.partmappings["Value"] || "value"; }
for (let i = 0; i < items.length; i++) { const item = items[i]; this._items.push({ text: item[displayproperty] ? String(item[displayproperty]) : '', value: item[valueproperty], rawData: item }); }
if (this._hasRendered) { this._renderItems(); } }
 
DESIGN-TIME VS RUNTIME
designtime_logic.js:
•	Extends HTMLElement (NOT K2BaseControl)
•	Does NOT call safeRaisePropertyChanged()
•	Disables interactivity: tabindex="-1", pointer-events: none
•	Provides static preview only
runtime_logic.js:
•	Extends K2BaseControl
•	Calls safeRaisePropertyChanged() on every property setter
•	Full keyboard navigation and event handling
•	Dispatches events with bubbles: true
•	Implements execute() for K2 method invocation
•	Implements list binding callbacks if using DataBinding
 
WCAG 2.1 LEVEL AA COMPLIANCE — REQUIRED
Every control MUST implement: semantic ARIA roles, keyboard navigation (Arrow keys, Enter, Space, Escape, Tab), focus management (tabindex), text alternatives, error announcements (role="alert"), reduced motion support, proper color contrast (4.5:1 for text, 3:1 for large text and focus indicators), and disabled/read-only states.

To get started with our requirement, I'm going to add the following prompt along with my template:


Let's develop a checklist control for K2 based on the Material 3 list control. This control will feature a checkbox option, with an input to select left or right (defaulting to left). When a user clicks an item, it will be crossed out, and the new state will be saved into the list binding.*

The list binding will be a SmartObject containing Name, assignedTo, TaskID, and state. The list will display the Name (task name), with a filter input for assignedTo and TaskID. The state indicates whether the item is completed (crossed out)

Additionally, can we include a method to determine if all items are marked as completed (yes/no)?"

I didn't add the URL to the Material 3 link, as Opus 4.6 is incredible and makes the most of the multi-agent approach.

Add everything to the prompt, and let Claude Code do its thing. I always recommend using Plan mode first before accepting the edits.

Iterating on the plan

This all looks good, but I noticed the requirement about the filter input is incorrect. I don't want this to be a user filter input. Instead, it should be a control input that remains hidden from the user, as we will configure it from design mode.

So I told Claude that, and it updated the plan accordingly. Awesome.

With the corrected plan in place, let's go ahead and accept it. Auto accept and let the agents work.

I would highly recommend following what the agent is doing in terms of building out files and how the logic is put together, so you have an understanding of what was done. But it's great to see what the agents are working on. This is essentially a task that could take 3 to 5 days to build, and we get to witness it done in minutes.

And in 2 minutes and 11 seconds we have a fully built control.

Incredible.

Testing in the Controls Dojo

Now let's head back over to the Dojo to test out the control. If something isn't right, or we need to add additional functionality, feel free to prompt more.

If we are building out a project, I highly recommend creating a GitHub repo so we can save our work before prompts and roll back if necessary.

This performed exceptionally well immediately, and everything appears good in the Dojo. Be sure to test all aspects, including inputs, look and feel, both during design time and runtime. Confirm that the control is set to read-only mode in design time.

Deploying to K2

To deploy, all we need to do is zip the control up from the folder. You can also click the download button from the Dojo and that will zip up the folder for you in the same location.

Since it's working in the Dojo you can be fairly confident it will work in K2, but you should always fully test before rolling out to production.

Within K2 Management, go to Custom Controls and upload the zip file. You will see Claude already created a logo and description you can use. But feel free to change it if need be.

Wiring it up in K2 Designer

Now to test, let's go into K2 Designer and drag the control onto a view. Since this is a data-driven control, it will only appear on the view designers, not the form designers. This is standard K2 practice.

You will see the control is available under the Custom category in the toolbox at the bottom. And all the inputs are now available on the right side, including the list data. It will auto populate with static values to start with, but you can move this to a SmartObject which is better practice.

Also test things like the methods to ensure they are coming through the rules designer. And finally wire everything up and try it out in the runtime.

The control might look a little different as this one was designed to be theme-aware. You can turn it off, however it's nice to have the control's look and feel adapt to the K2 style profile.

What used to take weeks now takes minutes. Vibe coding with Claude Code isn't just a shortcut. It's a fundamentally different way to approach custom control development in K2. The prompt template gives Claude the framework knowledge it needs, and from there it's just a conversation about what you want to build.

Comments

Comments