Custom Widgets

import { defineWidget, Parameters } from '@osdk/widget.client';

const parameters = {
  title: Parameters.string(),
  maxItems: Parameters.number(),
  showBorder: Parameters.boolean(),
  selectedObjects: Parameters.objectSet({ objectType: 'Employee' }),
} satisfies Parameters.Definition;

export default defineWidget({
  parameters,
  render: ({ parameters }) => {
    return {
      element: document.getElementById('root')!,
      component: MyWidgetApp,
      props: {
        title: parameters.title.value ?? 'Default Title',
        maxItems: parameters.maxItems.value ?? 25,
        showBorder: parameters.showBorder.value ?? false,
        selectedObjects: parameters.selectedObjects.value,
      },
    };
  },
});

import React from 'react';
import { useParameterValue, useEmitEvent } from '@osdk/widget.client-react';
import { defineWidget, Parameters, Events } from '@osdk/widget.client';

const parameters = {
  employeeSet: Parameters.objectSet({ objectType: 'Employee' }),
  filterActive: Parameters.boolean(),
} satisfies Parameters.Definition;

const events = {
  employeeSelected: Events.objectClicked({ objectType: 'Employee' }),
  filterChanged: Events.string(),
} satisfies Events.Definition;

export default defineWidget({ parameters, events });

export function EmployeeListWidget() {
  const employeeSet = useParameterValue('employeeSet');
  const filterActive = useParameterValue('filterActive');
  const emitEmployeeSelected = useEmitEvent('employeeSelected');
  const emitFilterChanged = useEmitEvent('filterChanged');

  const handleEmployeeClick = (employee: Employee) => {
    emitEmployeeSelected({ object: employee });
  };

  const handleFilterToggle = (value: string) => {
    emitFilterChanged(value);
  };

  return (
    <div>
      {/* render employee list */}
    </div>
  );
}

import React, { useCallback } from 'react';
import { useParameterValue, useEmitEvent } from '@osdk/widget.client-react';
import { defineWidget, Parameters, Events } from '@osdk/widget.client';

const parameters = {
  activeTab: Parameters.string(),
  searchQuery: Parameters.string(),
} satisfies Parameters.Definition;

const events = {
  tabChanged: Events.string(),
  searchQueryChanged: Events.string(),
} satisfies Events.Definition;

export default defineWidget({ parameters, events });

export function TabbedWidget() {
  const activeTab = useParameterValue('activeTab') ?? 'overview';
  const searchQuery = useParameterValue('searchQuery') ?? '';

  const emitTabChanged = useEmitEvent('tabChanged');
  const emitSearchQueryChanged = useEmitEvent('searchQueryChanged');

  const handleTabChange = useCallback(
    (tabId: string) => {
      emitTabChanged(tabId);
    },
    [emitTabChanged],
  );

  const handleSearchChange = useCallback(
    (query: string) => {
      emitSearchQueryChanged(query);
    },
    [emitSearchQueryChanged],
  );

  return (
    <div>
      <TabBar active={activeTab} onChange={handleTabChange} />
      <SearchBar value={searchQuery} onChange={handleSearchChange} />
    </div>
  );
}

import React from 'react';
import {
  WorkshopContextProvider,
  useWorkshopContext,
} from '@osdk/workshop-iframe-custom-widget';
import { createClient } from '@osdk/client';

const client = createClient({
  url: window.location.origin,
  clientId: 'my-widget-client-id',
  ontologyRid: 'ri.ontology.main.ontology.abc123',
});

function EmployeePanel() {
  const context = useWorkshopContext();

  const employees = context.fieldValues.employeeSet;
  const statusFilter = context.fieldValues.statusFilter ?? 'all';

  const handleEmployeeSelect = (employeeRid: string) => {
    context.executeEvent('employeeSelected', employeeRid);
  };

  if (!employees) {
    return <div>No employees bound.</div>;
  }

  return (
    <div>
      <p>Loaded {employees.objects.length} employees</p>
      {employees.objects.map((emp) => (
        <button key={emp.$primaryKey} onClick={() => handleEmployeeSelect(emp.$primaryKey)}>
          {emp.fullName}
        </button>
      ))}
    </div>
  );
}

export function App() {
  return (
    <WorkshopContextProvider>
      <EmployeePanel />
    </WorkshopContextProvider>
  );
}

name: Deploy Custom Widget

on:
  push:
    branches:
      - main

jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: '20'
          cache: 'npm'

      - name: Install dependencies
        run: npm ci

      - name: Build widget
        run: npm run build

      - name: Deploy to Foundry
        env:
          FOUNDRY_TOKEN: ${{ secrets.FOUNDRY_SERVICE_TOKEN }}
          FOUNDRY_URL: ${{ secrets.FOUNDRY_STACK_URL }}
        run: |
          npx @osdk/cli@latest widgetset deploy \
            --foundry-url "$FOUNDRY_URL" \
            --token "$FOUNDRY_TOKEN" \
            --widget-set-rid ri.widgetregistry.main.widget-set.abc123