@rippling/rippling-sdk 0.2.0-alpha.84 → 0.2.0-alpha.86

package/examples/manifest/todo-app-without-object-list-view/functions/todo-page.ts

@@ -10,7 +10,7 @@
  *
  * In `triggerFunction`, server-bound action params live under `inputs` so
  * repeated item values like `todo.$('id')` resolve before reaching
- * `event['parameters']`. Client-side controls such as `functionId`,
+ * `event['parameters']`. Client-side controls such as `functionApiName`,
  * `responsePath`, `onSuccess`, and `onError` stay top-level.
  *
  * `/isMutating` is a shared loading flag: it disables every action while an API
@@ -29,31 +29,23 @@ import {
   TextInput,
   VStack,
   render,
+  setState,
+  triggerFunction,
 } from '@rippling/pebble-sdui-web/catalogs/custom-apps';
-import { FunctionContext, FunctionResponse, SduiPageFunctionEvent } from '@rippling/rippling-sdk';
-import {
-  createCustomObjectFunctionRuntime,
-  createRqlHelpers,
-  type RecordShape,
-  type TypedCustomObjectRecordManager,
-} from '@rippling/rippling-sdk/core/platform/custom-objects';
-import {
-  createTypedSduiMutationTrigger,
-  defineTypedSduiPageHandlerFor,
-  defineTypedSduiStateAssignments,
-  resolveTypedSduiStatePath,
-  type TypedSduiPageActionParams,
-  type TypedSduiPageOutput,
-} from '@rippling/rippling-sdk/core/platform/manifest/custom-objects';
-import { todoDefinition } from '../schema';
-
-const todoRql = createRqlHelpers(todoDefinition);
+import RipplingSDK, {
+  FunctionContext,
+  FunctionResponse,
+  SduiPageFunctionEvent,
+} from '@rippling/rippling-sdk';
+import type { CustomObjectDataRow } from '@rippling/rippling-sdk/resources/custom-objects/records';
+
+const OBJECT_API_NAME = 'todo__c';
 type TodoPageAction = 'init' | 'addTodo' | 'toggleTodo' | 'clearCompleted';
-type TodoPageFunctionParameters =
-  | { action: 'init' }
-  | { action: 'addTodo'; text?: string }
-  | { action: 'toggleTodo'; todoId?: string }
-  | { action: 'clearCompleted' };
+type TodoPageFunctionParameters = {
+  action: TodoPageAction;
+  text?: string;
+  todoId?: string;
+};
 
 type Todo = {
   id: string;
@@ -61,8 +53,6 @@ type Todo = {
   completed: boolean;
 };
 
-type TodoRecord = RecordShape<typeof todoDefinition>;
-
 type TodoListState = {
   todos: Todo[];
   isEmpty: boolean;
@@ -77,43 +67,27 @@ type TodoAppState = {
 
 type TodoSpec = SpecContext<TodoAppState>;
 
-const todoStatePath = resolveTypedSduiStatePath<TodoAppState>();
-const todoStatePaths = {
-  newTodoText: todoStatePath('/newTodoText'),
-  todoList: todoStatePath('/todoList'),
-  todoListTodos: todoStatePath('/todoList/todos'),
-  todoListIsEmpty: todoStatePath('/todoList/isEmpty'),
-  isMutating: todoStatePath('/isMutating'),
-  errorMessage: todoStatePath('/errorMessage'),
-} as const;
-
-export type Input = SduiPageFunctionEvent<TodoPageFunctionParameters>;
-
-export type Output = TypedSduiPageOutput<TodoListState>;
-
-function createTodoManager(context: FunctionContext): TypedCustomObjectRecordManager<typeof todoDefinition> {
-  const runtime = createCustomObjectFunctionRuntime(context);
-  return runtime.for(todoDefinition);
+function createClient(context: FunctionContext): RipplingSDK {
+  return new RipplingSDK({
+    bearerToken: context.env.rippling_user_bearer_token,
+  });
 }
 
-function toTodo(record: TodoRecord): Todo {
+function toTodo(record: CustomObjectDataRow): Todo {
   return {
     id: record.id,
     text: record.name,
-    completed: record.completed === true,
+    completed: record['completed__c'] === true,
   };
 }
 
-async function listTodos(
-  manager: TypedCustomObjectRecordManager<typeof todoDefinition>,
-  roleId: string,
-): Promise<Todo[]> {
-  const response = await manager.query({
+async function listTodos(client: RipplingSDK, roleId: string): Promise<Todo[]> {
+  const response = await client.customObjects.records.query(OBJECT_API_NAME, {
     limit: 100,
-    query: todoRql.render(todoRql.eq(todoRql.fields.created_by, { id: roleId, apiName: 'Employee' })),
+    query: `created_by = "${roleId}"`, // RQL query to filter todos by the current role
   });
 
-  return response.results.map(toTodo);
+  return (response.results ?? []).map(toTodo);
 }
 
 function todoListState(todos: Todo[]): TodoListState {
@@ -132,32 +106,49 @@ function todoState(todos: Todo[]): TodoAppState {
   };
 }
 
-function todoTextParam(params: TypedSduiPageActionParams<TodoPageFunctionParameters, 'addTodo'>): string {
-  return typeof params.text === 'string' ? params.text.trim() : '';
+function ok(body: Record<string, unknown> | unknown[] = {}): FunctionResponse {
+  return new FunctionResponse({
+    body: body as Record<string, unknown>,
+    statusCode: 200,
+    headers: {},
+    message: '',
+  });
+}
+
+function badRequest(message: string): FunctionResponse {
+  return new FunctionResponse({
+    body: { error: message },
+    statusCode: 400,
+    headers: {},
+    message,
+  });
+}
+
+function serverError(error: unknown): FunctionResponse {
+  const message = error instanceof Error ? error.message : 'Unknown error';
+
+  return new FunctionResponse({
+    body: { error: message },
+    statusCode: 500,
+    headers: {},
+    message,
+  });
 }
 
-function todoIdParam(params: TypedSduiPageActionParams<TodoPageFunctionParameters, 'toggleTodo'>): string {
-  return typeof params.todoId === 'string' ? params.todoId.trim() : '';
+function stringParam(params: TodoPageFunctionParameters, key: 'text' | 'todoId'): string {
+  const value = params[key];
+  return typeof value === 'string' ? value.trim() : '';
 }
 
-function mutationActions<TInputs extends { action: Exclude<TodoPageAction, 'init'> }>(
-  functionId: string,
-  inputs: TInputs,
-  errorMessage: string,
-  onSuccessState?: ReturnType<typeof defineTypedSduiStateAssignments<TodoAppState>>,
-) {
-  return createTypedSduiMutationTrigger<TodoAppState, TodoListState, typeof inputs>({
-    functionId,
-    inputs,
-    responsePath: todoStatePaths.todoList,
-    errorMessage,
-    mutationStatePath: todoStatePaths.isMutating,
-    errorStatePath: todoStatePaths.errorMessage,
-    ...(onSuccessState != null ? { onSuccessState } : {}),
+// A single mutation flag disables all actions and drives the visible loading text.
+function setMutationState(isMutating: boolean) {
+  return setState({
+    statePath: '/isMutating',
+    value: isMutating,
   });
 }
 
-function buildAddTodoSection(spec: TodoSpec, functionId: string) {
+function buildAddTodoSection(spec: TodoSpec, functionApiName: string) {
   return VStack({
     id: 'addTodoSection',
     props: {},
@@ -173,8 +164,8 @@ function buildAddTodoSection(spec: TodoSpec, functionId: string) {
             props: {
               name: 'newTodo',
               placeholder: 'Enter a new todo item',
-              value: spec.$bindState(todoStatePaths.newTodoText),
-              isDisabled: spec.$state(todoStatePaths.isMutating),
+              value: spec.$bindState('/newTodoText'),
+              isDisabled: spec.$state('/isMutating'),
             },
           }),
         ],
@@ -186,34 +177,37 @@ function buildAddTodoSection(spec: TodoSpec, functionId: string) {
           appearance: 'PRIMARY',
           isFluid: true,
           isDisabled: spec.$cond(
-            or_(
-              equals(spec.$state(todoStatePaths.newTodoText), ''),
-              equals(spec.$state(todoStatePaths.isMutating), true),
-            ),
+            or_(equals(spec.$state('/newTodoText'), ''), equals(spec.$state('/isMutating'), true)),
             true,
             false,
           ),
         },
         on: {
-          press: mutationActions(
-            functionId,
-            {
-              action: 'addTodo',
-              text: spec.$state(todoStatePaths.newTodoText),
-            },
-            'Could not add todo. Try again.',
-            defineTypedSduiStateAssignments<TodoAppState>({
-              [todoStatePaths.newTodoText]: '',
-            }),
-          ),
+          press: [
+            setMutationState(true),
+            triggerFunction(
+              {
+                functionApiName,
+                inputs: {
+                  action: 'addTodo',
+                  text: spec.$state('/newTodoText'),
+                },
+                responsePath: '/todoList',
+              },
+              {
+                onSuccess: { set: { '/newTodoText': '', '/errorMessage': '', '/isMutating': false } },
+                onError: { set: { '/errorMessage': 'Could not add todo. Try again.', '/isMutating': false } },
+              },
+            ),
+          ],
         },
       }),
     ],
   });
 }
 
-function buildTodoItems(spec: TodoSpec, functionId: string) {
-  const [todoRepeat, todo] = spec.repeat(todoStatePaths.todoListTodos, 'id');
+function buildTodoItems(spec: TodoSpec, functionApiName: string) {
+  const [todoRepeat, todo] = spec.repeat('/todoList/todos', 'id');
 
   return VStack({
     id: 'todoItems',
@@ -237,17 +231,31 @@ function buildTodoItems(spec: TodoSpec, functionId: string) {
             props: {
               name: 'completed',
               value: todo.$bind('completed'),
-              isDisabled: spec.$state(todoStatePaths.isMutating),
+              isDisabled: spec.$state('/isMutating'),
             },
             on: {
-              change: mutationActions(
-                functionId,
-                {
-                  action: 'toggleTodo',
-                  todoId: todo.$('id'),
-                },
-                'Could not update todo. Refresh and try again.',
-              ),
+              change: [
+                setMutationState(true),
+                triggerFunction(
+                  {
+                    functionApiName,
+                    inputs: {
+                      action: 'toggleTodo',
+                      todoId: todo.$('id'),
+                    },
+                    responsePath: '/todoList',
+                  },
+                  {
+                    onSuccess: { set: { '/errorMessage': '', '/isMutating': false } },
+                    onError: {
+                      set: {
+                        '/errorMessage': 'Could not update todo. Refresh and try again.',
+                        '/isMutating': false,
+                      },
+                    },
+                  },
+                ),
+              ],
             },
           }),
           Text({
@@ -264,7 +272,7 @@ function buildTodoItems(spec: TodoSpec, functionId: string) {
   });
 }
 
-function buildTodoList(spec: TodoSpec, functionId: string) {
+function buildTodoList(spec: TodoSpec, functionApiName: string) {
   return VStack({
     id: 'todoList',
     props: {
@@ -293,35 +301,46 @@ function buildTodoList(spec: TodoSpec, functionId: string) {
               appearance: 'OUTLINE',
               size: 'S',
               isDisabled: spec.$cond(
-                or_(
-                  equals(spec.$state(todoStatePaths.isMutating), true),
-                  equals(spec.$state(todoStatePaths.todoListIsEmpty), true),
-                ),
+                or_(equals(spec.$state('/isMutating'), true), equals(spec.$state('/todoList/isEmpty'), true)),
                 true,
                 false,
               ),
             },
             on: {
-              press: mutationActions(
-                functionId,
-                {
-                  action: 'clearCompleted',
-                },
-                'Could not clear completed todos. Try again.',
-              ),
+              press: [
+                setMutationState(true),
+                triggerFunction(
+                  {
+                    functionApiName,
+                    inputs: {
+                      action: 'clearCompleted',
+                    },
+                    responsePath: '/todoList',
+                  },
+                  {
+                    onSuccess: { set: { '/errorMessage': '', '/isMutating': false } },
+                    onError: {
+                      set: {
+                        '/errorMessage': 'Could not clear completed todos. Try again.',
+                        '/isMutating': false,
+                      },
+                    },
+                  },
+                ),
+              ],
             },
           }),
         ],
       }),
       Text({
         id: 'emptyTodos',
-        visible: equals(spec.$state(todoStatePaths.todoListIsEmpty), true),
+        visible: equals(spec.$state('/todoList/isEmpty'), true),
         props: {
           text: 'No todos yet.',
           color: 'colorOnSurfaceVariant',
         },
       }),
-      buildTodoItems(spec, functionId),
+      buildTodoItems(spec, functionApiName),
     ],
   });
 }
@@ -329,9 +348,9 @@ function buildTodoList(spec: TodoSpec, functionId: string) {
 function buildError(spec: TodoSpec) {
   return Text({
     id: 'todoError',
-    visible: neq(spec.$state(todoStatePaths.errorMessage), ''),
+    visible: neq(spec.$state('/errorMessage'), ''),
     props: {
-      text: spec.$state(todoStatePaths.errorMessage),
+      text: spec.$state('/errorMessage'),
       color: 'colorError',
     },
   });
@@ -341,7 +360,7 @@ function buildLoading(spec: TodoSpec) {
   return Text({
     id: 'todoLoading',
     // Keep disabled controls explainable while a triggerFunction call is in flight.
-    visible: equals(spec.$state(todoStatePaths.isMutating), true),
+    visible: equals(spec.$state('/isMutating'), true),
     props: {
       text: 'Updating todos...',
       color: 'colorOnSurfaceVariant',
@@ -349,7 +368,7 @@ function buildLoading(spec: TodoSpec) {
   });
 }
 
-function buildTodoCard(spec: TodoSpec, functionId: string) {
+function buildTodoCard(spec: TodoSpec, functionApiName: string) {
   return Card({
     id: 'todoCard',
     props: {},
@@ -361,17 +380,17 @@ function buildTodoCard(spec: TodoSpec, functionId: string) {
           padding: 'space400',
         },
         children: [
-          buildAddTodoSection(spec, functionId),
+          buildAddTodoSection(spec, functionApiName),
           buildError(spec),
           buildLoading(spec),
-          buildTodoList(spec, functionId),
+          buildTodoList(spec, functionApiName),
         ],
       }),
     ],
   });
 }
 
-function renderSpec(state: TodoAppState, functionId: string) {
+function renderSpec(state: TodoAppState, functionApiName: string) {
   const spec = createSpec<TodoAppState>({ state });
   const root = PageContent({
     id: 'todoApp',
@@ -379,92 +398,100 @@ function renderSpec(state: TodoAppState, functionId: string) {
       size: '776',
       alignment: 'CENTER',
     },
-    children: [buildTodoCard(spec, functionId)],
+    children: [buildTodoCard(spec, functionApiName)],
   });
 
   return render({ root, state });
 }
 
 async function addTodo(
-  manager: TypedCustomObjectRecordManager<typeof todoDefinition>,
-  params: TypedSduiPageActionParams<TodoPageFunctionParameters, 'addTodo'>,
+  client: RipplingSDK,
+  params: TodoPageFunctionParameters,
   roleId: string,
 ): Promise<TodoListState> {
-  const text = todoTextParam(params);
+  const text = stringParam(params, 'text');
 
   if (!text) {
     throw new Error('Todo text is required');
   }
 
-  await manager.create({
+  await client.customObjects.records.create(OBJECT_API_NAME, {
     name: text,
-    completed: false,
+    completed__c: false,
   });
 
-  return todoListState(await listTodos(manager, roleId));
+  return todoListState(await listTodos(client, roleId));
 }
 
 async function toggleTodo(
-  manager: TypedCustomObjectRecordManager<typeof todoDefinition>,
-  params: TypedSduiPageActionParams<TodoPageFunctionParameters, 'toggleTodo'>,
+  client: RipplingSDK,
+  params: TodoPageFunctionParameters,
   roleId: string,
 ): Promise<TodoListState> {
-  const todoId = todoIdParam(params);
+  const todoId = stringParam(params, 'todoId');
 
   if (!todoId) {
     throw new Error('todoId must be a todo record ID');
   }
 
-  const todo = toTodo(await manager.get(todoId));
-  await manager.update(todoId, {
-    completed: !todo.completed,
+  const todo = toTodo(await client.customObjects.records.retrieve(OBJECT_API_NAME, todoId));
+  await client.customObjects.records.update(OBJECT_API_NAME, todoId, {
+    completed__c: !todo.completed,
   });
 
-  return todoListState(await listTodos(manager, roleId));
+  return todoListState(await listTodos(client, roleId));
 }
 
-async function clearCompleted(
-  manager: TypedCustomObjectRecordManager<typeof todoDefinition>,
-  roleId: string,
-): Promise<TodoListState> {
-  const todos = await listTodos(manager, roleId);
+async function clearCompleted(client: RipplingSDK, roleId: string): Promise<TodoListState> {
+  const todos = await listTodos(client, roleId);
   const completedTodoIds = todos.filter((todo) => todo.completed).map((todo) => todo.id);
 
   if (completedTodoIds.length === 0) {
     return todoListState(todos);
   }
 
-  await manager.deleteMany(completedTodoIds, {
-    allOrNothing: false,
+  await client.customObjects.records.bulkDelete(OBJECT_API_NAME, {
+    all_or_nothing: false,
+    rows_to_delete: completedTodoIds,
   });
 
-  return todoListState(await listTodos(manager, roleId));
+  return todoListState(await listTodos(client, roleId));
 }
 
-const defineTodoPageHandler = defineTypedSduiPageHandlerFor<TodoPageFunctionParameters, TodoListState>();
-
-const todoPageHandler = defineTodoPageHandler({
-  requireRoleId: true,
-  createRuntime(context) {
-    return {
-      manager: createTodoManager(context),
-      functionId: context.function.function_id,
-    };
-  },
-  async init({ runtime, roleId }) {
-    const todos = await listTodos(runtime.manager, roleId);
-    return renderSpec(todoState(todos), runtime.functionId);
-  },
-  actions: {
-    addTodo: async ({ runtime, params, roleId }) => addTodo(runtime.manager, params, roleId),
-    toggleTodo: async ({ runtime, params, roleId }) => toggleTodo(runtime.manager, params, roleId),
-    clearCompleted: async ({ runtime, roleId }) => clearCompleted(runtime.manager, roleId),
-  },
-});
-
 export async function onRipplingEvent(
-  event: Input,
+  event: SduiPageFunctionEvent<TodoPageFunctionParameters>,
   context: FunctionContext,
-): Promise<FunctionResponse<Output>> {
-  return todoPageHandler(event, context);
+): Promise<FunctionResponse> {
+  const params = event.parameters;
+  const action = params.action;
+  const roleId = context.function.role_id;
+  if (!roleId) {
+    return badRequest('Role ID is required');
+  }
+
+  try {
+    const client = createClient(context);
+
+    if (action === 'init') {
+      const functionApiName = context.function.function_api_name;
+      const todos = await listTodos(client, roleId);
+      return ok({ spec: JSON.stringify(renderSpec(todoState(todos), functionApiName)) });
+    }
+
+    if (action === 'addTodo') {
+      return ok(await addTodo(client, params, roleId));
+    }
+
+    if (action === 'toggleTodo') {
+      return ok(await toggleTodo(client, params, roleId));
+    }
+
+    if (action === 'clearCompleted') {
+      return ok(await clearCompleted(client, roleId));
+    }
+
+    return badRequest(`Unknown action: ${action}`);
+  } catch (error) {
+    return serverError(error);
+  }
 }

package/examples/manifest/todo-app-without-object-list-view/todo-app-without-object-list-view.ts

@@ -1,9 +1,9 @@
 /*
- * Todo App Without ObjectListView — custom SDUI backed by typed custom-object records.
+ * Todo App Without ObjectListView — custom SDUI backed by Custom Object records.
  *
  * This example intentionally does not render ObjectListView. The SDUI page reads
- * and writes `todo__c` records from the function, then renders its own todo
- * list with TextInput, Button, Checkbox, and layout components.
+ * and writes `todo__c` records from the function, then renders its own
+ * todo list with TextInput, Button, Checkbox, and layout components.
  *
  *   todo__c   <- name, completed__c
  *
@@ -12,34 +12,54 @@
  *       > examples/manifest/todo-app-without-object-list-view/manifest.json
  */
 
+import * as fs from 'node:fs';
 import * as path from 'node:path';
-import { toCustomCategoryApiName } from '@rippling/rippling-sdk/core/platform/custom-objects';
 import {
-  defineSduiPageFromFunctionFile,
-  defineTypedPageLayout,
-  registerManifestCustomObject,
-} from '@rippling/rippling-sdk/core/platform/manifest/custom-objects';
-import { App, Category, ManifestBuilder } from '@rippling/rippling-sdk/lib/manifest';
-import { CUSTOM_TODO_CATEGORY, todoDefinition } from './schema';
+  App,
+  BooleanField,
+  Category,
+  CustomObject,
+  CustomObjectFieldSection,
+  CustomObjectPageLayout,
+  ManifestBuilder,
+  ManifestFunction,
+  SduiPage,
+} from '@rippling/rippling-sdk/lib/manifest';
 
 const manifest = new ManifestBuilder({
   key: 'todo_app_without_object_list_view',
   name: 'Todo App Without ObjectListView',
-  description: 'A todo app that renders custom SDUI and persists changes to typed custom-object records',
+  description: 'A todo app that renders custom SDUI and persists changes to Custom Object records',
 });
 
 const todoCategory = new Category(manifest, {
-  apiName: toCustomCategoryApiName(CUSTOM_TODO_CATEGORY),
+  apiName: 'custom_todo_app__c',
   name: 'Todo App',
   description: 'Custom todo app records',
 });
 
-const todo = registerManifestCustomObject(manifest, {
-  definition: todoDefinition,
+const todoObj = new CustomObject(manifest, {
+  apiName: 'todo__c',
+  name: 'Todo',
+  pluralLabel: 'Todos',
   category: todoCategory,
+  description: 'A todo item rendered by a custom SDUI page',
+  icon: { emoji: '✅' },
+});
+
+const detailsSection = new CustomObjectFieldSection(todoObj, {
+  name: 'Details',
+  sectionId: 'sec_custom_todo_details',
 });
 
-defineTypedPageLayout(todo, {
+const completedField = new BooleanField(todoObj, {
+  apiName: 'completed__c',
+  displayName: 'Completed',
+  description: 'Whether the todo item is complete',
+  section: detailsSection,
+});
+
+new CustomObjectPageLayout(todoObj, {
   apiName: 'default',
   name: 'Todo',
   layoutId: 'layout_custom_todo',
@@ -53,8 +73,8 @@ defineTypedPageLayout(todo, {
           {
             name: 'Details',
             type: 'fields_section',
-            section: todo.sections.details,
-            fields: [{ field: 'name', editable: true }, 'completed'],
+            section: detailsSection,
+            fields: [{ field: 'name', editable: true }, completedField],
           },
         ],
       },
@@ -65,22 +85,25 @@ defineTypedPageLayout(todo, {
   visibilityConditions: {},
 });
 
-const { page: todoPage } = defineSduiPageFromFunctionFile(manifest, {
+const todoPageFn = new ManifestFunction(manifest, {
   apiName: 'custom_todo_page_fn',
   name: 'renderTodoPage',
-  description: 'Custom SDUI todo page backed by typed custom-object record APIs',
-  codeDirectory: path.join(__dirname, 'functions'),
-  codeFilename: 'todo-page.ts',
+  description: 'Custom SDUI todo page backed by Custom Object record APIs',
+  code: fs.readFileSync(path.join(__dirname, 'functions', 'todo-page.ts'), 'utf-8'),
   dependencies: { '@rippling/rippling-sdk': '^0.2.0-alpha.65', '@rippling/pebble-sdui-web': '^0.9.2' },
   isAsync: false,
-  pageId: 'custom_todo_page',
-  pageName: 'Todos',
+});
+
+const todoPage = new SduiPage(manifest, {
+  sduiPageId: 'custom_todo_page',
+  name: 'Todos',
+  function: todoPageFn,
 });
 
 new App(manifest, {
   apiName: 'todo_app_without_object_list_view',
   name: 'Todo App Without ObjectListView',
-  description: 'Todo app with a fully custom SDUI page and typed custom-object persistence',
+  description: 'Todo app with a fully custom SDUI page and Custom Object persistence',
   appType: 'custom',
   pages: [todoPage],
 });