@salesforce/webapp-template-app-react-sample-b2x-experimental 1.68.1 → 1.70.0

package/dist/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.70.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.69.0...v1.70.0) (2026-03-04)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
+# [1.69.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.68.1...v1.69.0) (2026-03-04)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 ## [1.68.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.68.0...v1.68.1) (2026-03-04)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental

package/dist/force-app/main/default/data/Lease__c.json

@@ -9424,6 +9424,19 @@
       "Monthly_Rent__c": 23729,
       "Lease_Status__c": "Pending",
       "Security_Deposit__c": 23729
+    },
+    {
+      "attributes": {
+        "type": "Lease__c",
+        "referenceId": "LeaseRef725"
+      },
+      "Property__c": "@PropertyRef12",
+      "Tenant__c": "@TenantRef725",
+      "Start_Date__c": "2025-09-28",
+      "End_Date__c": "2026-03-28",
+      "Monthly_Rent__c": 6728,
+      "Lease_Status__c": "Pending",
+      "Security_Deposit__c": 6728
     }
   ]
 }

package/dist/force-app/main/default/webapplications/appreactsampleb2x/package.json

@@ -15,20 +15,25 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/sdk-data": "^1.68.1",
-    "@salesforce/webapp-experimental": "^1.68.1",
+    "@salesforce/sdk-data": "^1.70.0",
+    "@salesforce/webapp-experimental": "^1.70.0",
     "@tailwindcss/vite": "^4.1.17",
-    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "react-router": "^7.10.1",
-    "tailwindcss": "^4.1.17",
+    "@tanstack/react-form": "^1.28.4",
+    "@types/leaflet": "^1.9.21",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "leaflet": "^1.9.4",
     "lucide-react": "^0.562.0",
     "radix-ui": "^1.4.3",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-leaflet": "^5.0.0",
+    "react-router": "^7.10.1",
     "shadcn": "^3.8.5",
     "tailwind-merge": "^3.4.0",
-    "tw-animate-css": "^1.4.0"
+    "tailwindcss": "^4.1.17",
+    "tw-animate-css": "^1.4.0",
+    "zod": "^4.3.6"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
@@ -38,7 +43,7 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-webapp-experimental": "^1.68.1",
+    "@salesforce/vite-plugin-webapp-experimental": "^1.70.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/api/applicationApi.ts

@@ -0,0 +1,78 @@
+/**
+ * Create Application__c (property application) record via Salesforce UI API.
+ * Uses only fields that exist in all orgs (Property__c, Status__c, Start_Date__c,
+ * Employment_Info__c, References__c). Applicant contact details are stored in
+ * Employment_Info__c so no data is lost if custom contact fields aren’t deployed.
+ */
+import { createRecord } from "@salesforce/webapp-experimental/api";
+
+const OBJECT_API_NAME = "Application__c";
+
+export interface ApplicationRecordInput {
+	Property__c: string | null;
+	Status__c?: string;
+	First_Name__c?: string | null;
+	Last_Name__c?: string | null;
+	Email__c?: string | null;
+	Phone__c?: string | null;
+	Start_Date__c?: string | null;
+	Preferred_Term__c?: string | null;
+	Employment_Info__c?: string | null;
+	References__c?: string | null;
+}
+
+function buildEmploymentInfoBlob(input: ApplicationRecordInput): string {
+	const lines: string[] = [];
+	const contact = [
+		input.First_Name__c,
+		input.Last_Name__c,
+		input.Email__c,
+		input.Phone__c,
+		input.Preferred_Term__c,
+	]
+		.filter(Boolean)
+		.join(", ");
+	if (contact) lines.push(`Contact: ${contact}`);
+	if (input.Employment_Info__c?.trim()) lines.push(input.Employment_Info__c.trim());
+	return lines.join("\n\n") || "";
+}
+
+/**
+ * Creates an Application__c record. Uses only core fields to avoid POST_BODY_PARSE_ERROR
+ * when custom contact fields are not yet in the org. Contact + employment text go into Employment_Info__c.
+ */
+export async function createApplicationRecord(
+	input: ApplicationRecordInput,
+): Promise<{ id: string }> {
+	const fields: Record<string, unknown> = {};
+
+	if (input.Property__c != null && input.Property__c !== "") {
+		fields.Property__c = input.Property__c;
+	}
+	if (input.Status__c != null && input.Status__c !== "") {
+		fields.Status__c = input.Status__c;
+	}
+	if (input.Start_Date__c != null && input.Start_Date__c !== "") {
+		fields.Start_Date__c = input.Start_Date__c;
+	}
+	const employmentBlob = buildEmploymentInfoBlob(input);
+	if (employmentBlob) {
+		fields.Employment_Info__c = employmentBlob;
+	}
+	if (input.References__c != null && input.References__c !== "") {
+		fields.References__c = input.References__c;
+	}
+
+	const result = (await createRecord(OBJECT_API_NAME, fields)) as unknown as Record<
+		string,
+		unknown
+	>;
+	const id =
+		typeof result.id === "string"
+			? result.id
+			: (result.fields as Record<string, { value?: string }> | undefined)?.Id?.value;
+	if (!id) {
+		throw new Error("Create succeeded but no record id returned");
+	}
+	return { id };
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/api/graphqlClient.ts

@@ -0,0 +1,17 @@
+/**
+ * GraphQL client using getDataSDK (replaces legacy executeGraphQL from webapp-experimental).
+ */
+import { getDataSDK } from "@salesforce/sdk-data";
+
+export async function executeGraphQL<T>(
+	query: string,
+	variables?: Record<string, unknown>,
+): Promise<T> {
+	const data = await getDataSDK();
+	const response = await data.graphql?.<T>(query, variables);
+	if (response?.errors?.length) {
+		const msg = response.errors.map((e) => e.message).join("; ");
+		throw new Error(`GraphQL Error: ${msg}`);
+	}
+	return (response?.data ?? {}) as T;
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/api/index.ts

@@ -0,0 +1,19 @@
+/**
+ * API layer: object metadata (GraphQL), layout + record detail (REST layout + GraphQL record), record list/single (GraphQL).
+ */
+export { objectInfoService } from "./objectInfoService";
+export { objectDetailService, extractFieldsFromLayout } from "./objectDetailService";
+export type { RecordDetailResult } from "./objectDetailService";
+export {
+	getRecordsGraphQL,
+	getRecordByIdGraphQL,
+	buildGetRecordsQuery,
+	buildWhereFromCriteria,
+	buildOrderByFromSort,
+} from "./recordListGraphQLService";
+export type {
+	RecordListGraphQLResult,
+	RecordListGraphQLVariables,
+	RecordListGraphQLOptions,
+	GraphQLRecordNode,
+} from "./recordListGraphQLService";

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/api/leadApi.ts

@@ -0,0 +1,69 @@
+/**
+ * Create Lead records in Salesforce for Contact Us form and newsletter signup.
+ * Uses the standard Lead object (FirstName, LastName, Email, Phone, Company, Description, LeadSource).
+ */
+import { createRecord } from "@salesforce/webapp-experimental/api";
+
+const OBJECT_API_NAME = "Lead";
+
+const LEAD_SOURCE_WEBSITE = "Website";
+const LEAD_SOURCE_NEWSLETTER = "Website Newsletter";
+
+function getRecordIdFromResponse(result: Record<string, unknown>): string {
+	const id =
+		typeof result.id === "string"
+			? result.id
+			: (result.fields as Record<string, { value?: string }> | undefined)?.Id?.value;
+	if (!id) throw new Error("Create succeeded but no record id returned");
+	return id;
+}
+
+export interface ContactUsInput {
+	FirstName: string;
+	LastName: string;
+	Email: string;
+	Phone?: string;
+	Subject?: string;
+	Message: string;
+}
+
+/**
+ * Creates a Lead from the Contact Us form. Uses Company for subject, Description for message.
+ */
+export async function createContactUsLead(input: ContactUsInput): Promise<{ id: string }> {
+	const fields: Record<string, unknown> = {
+		FirstName: input.FirstName.trim(),
+		LastName: input.LastName.trim(),
+		Email: input.Email.trim(),
+		Company: (input.Subject ?? "Contact Us").trim() || "Contact Us",
+		Description: input.Message.trim() || "",
+		LeadSource: LEAD_SOURCE_WEBSITE,
+	};
+	if (input.Phone?.trim()) {
+		fields.Phone = input.Phone.trim();
+	}
+	const result = (await createRecord(OBJECT_API_NAME, fields)) as unknown as Record<
+		string,
+		unknown
+	>;
+	return { id: getRecordIdFromResponse(result) };
+}
+
+/**
+ * Creates a Lead for newsletter/email signup. LastName and Company set to placeholders so Lead is valid.
+ */
+export async function createNewsletterLead(email: string): Promise<{ id: string }> {
+	const trimmed = email.trim();
+	if (!trimmed) throw new Error("Email is required");
+	const fields: Record<string, unknown> = {
+		LastName: "Newsletter Subscriber",
+		Company: "Website",
+		Email: trimmed,
+		LeadSource: LEAD_SOURCE_NEWSLETTER,
+	};
+	const result = (await createRecord(OBJECT_API_NAME, fields)) as unknown as Record<
+		string,
+		unknown
+	>;
+	return { id: getRecordIdFromResponse(result) };
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/api/maintenanceRequestApi.ts

@@ -0,0 +1,177 @@
+/**
+ * Maintenance_Request__c: list via GraphQL, create via createRecord.
+ */
+import { createRecord } from "@salesforce/webapp-experimental/api";
+import { executeGraphQL } from "./graphqlClient.js";
+
+const OBJECT_API_NAME = "Maintenance_Request__c";
+
+export interface MaintenanceRequestSummary {
+	id: string;
+	name: string | null;
+	title: string | null;
+	description: string | null;
+	type: string | null;
+	priority: string | null;
+	status: string | null;
+	dateRequested: string | null;
+}
+
+function pick<T>(obj: T, key: keyof T): unknown {
+	const v = obj[key];
+	if (v != null && typeof v === "object" && "value" in v) {
+		return (v as { value?: unknown }).value ?? null;
+	}
+	return v ?? null;
+}
+
+function str(x: unknown): string | null {
+	if (x == null) return null;
+	return String(x);
+}
+
+type Node = {
+	Id: string;
+	ApiName?: string | null;
+	Name?: { value?: unknown; displayValue?: string | null } | null;
+	Title__c?: { value?: unknown; displayValue?: string | null } | null;
+	Description__c?: { value?: unknown; displayValue?: string | null } | null;
+	Type__c?: { value?: unknown; displayValue?: string | null } | null;
+	Priority__c?: { value?: unknown; displayValue?: string | null } | null;
+	Status__c?: { value?: unknown; displayValue?: string | null } | null;
+	Date_Requested__c?: { value?: unknown; displayValue?: string | null } | null;
+};
+
+function nodeToSummary(node: Node): MaintenanceRequestSummary {
+	return {
+		id: node.Id,
+		name:
+			str(pick(node, "Name")) ?? str((node.Name as { displayValue?: string | null })?.displayValue),
+		title: str(pick(node, "Title__c")),
+		description: str(pick(node, "Description__c")),
+		type: str(pick(node, "Type__c")),
+		priority: str(pick(node, "Priority__c")),
+		status: str(pick(node, "Status__c")),
+		dateRequested: str(pick(node, "Date_Requested__c")),
+	};
+}
+
+const MAINTENANCE_REQUESTS_QUERY = /* GraphQL */ `
+	query MaintenanceRequests($first: Int!, $after: String) {
+		uiapi {
+			query {
+				Maintenance_Request__c(first: $first, after: $after) {
+					edges {
+						node {
+							Id
+							ApiName
+							Name {
+								value
+								displayValue
+							}
+							Title__c {
+								value
+								displayValue
+							}
+							Description__c {
+								value
+								displayValue
+							}
+							Type__c {
+								value
+								displayValue
+							}
+							Priority__c {
+								value
+								displayValue
+							}
+							Status__c {
+								value
+								displayValue
+							}
+							Date_Requested__c {
+								value
+								displayValue
+							}
+						}
+						cursor
+					}
+					pageInfo {
+						hasNextPage
+						endCursor
+					}
+				}
+			}
+		}
+	}
+`;
+
+interface MaintenanceRequestGraphQLResponse {
+	uiapi?: {
+		query?: {
+			Maintenance_Request__c?: {
+				edges?: ({ node?: Node | null } | null)[] | null;
+			} | null;
+		} | null;
+	} | null;
+}
+
+export async function queryMaintenanceRequests(
+	first: number = 50,
+	after: string | null = null,
+): Promise<MaintenanceRequestSummary[]> {
+	const response = await executeGraphQL<MaintenanceRequestGraphQLResponse>(
+		MAINTENANCE_REQUESTS_QUERY,
+		{ first, after: after ?? null } as Record<string, unknown>,
+	);
+	const edges = response.uiapi?.query?.Maintenance_Request__c?.edges ?? [];
+	const list: MaintenanceRequestSummary[] = [];
+	for (const e of edges) {
+		if (e?.node) list.push(nodeToSummary(e.node));
+	}
+	// Sort by date requested descending (newest first)
+	list.sort((a, b) => {
+		const da = a.dateRequested ?? "";
+		const db = b.dateRequested ?? "";
+		return db.localeCompare(da);
+	});
+	return list;
+}
+
+export interface CreateMaintenanceRequestInput {
+	Title__c: string;
+	Description__c?: string | null;
+	Type__c?: string | null;
+	Priority__c?: string;
+	Status__c?: string;
+	Date_Requested__c?: string | null;
+}
+
+function getRecordIdFromResponse(result: Record<string, unknown>): string {
+	const id =
+		typeof result.id === "string"
+			? result.id
+			: (result.fields as Record<string, { value?: string }> | undefined)?.Id?.value;
+	if (!id) throw new Error("Create succeeded but no record id returned");
+	return id;
+}
+
+export async function createMaintenanceRequest(
+	input: CreateMaintenanceRequestInput,
+): Promise<{ id: string }> {
+	const title = input.Title__c?.trim();
+	if (!title) throw new Error("Title is required");
+	const fields: Record<string, unknown> = {
+		Title__c: title,
+		Priority__c: input.Priority__c?.trim() || "Standard",
+		Status__c: input.Status__c?.trim() || "New",
+	};
+	if (input.Description__c?.trim()) fields.Description__c = input.Description__c.trim();
+	if (input.Type__c?.trim()) fields.Type__c = input.Type__c.trim();
+	if (input.Date_Requested__c?.trim()) fields.Date_Requested__c = input.Date_Requested__c.trim();
+	const result = (await createRecord(OBJECT_API_NAME, fields)) as unknown as Record<
+		string,
+		unknown
+	>;
+	return { id: getRecordIdFromResponse(result) };
+}

package/dist/force-app/main/default/webapplications/appreactsampleb2x/src/api/objectDetailService.ts

@@ -0,0 +1,125 @@
+/**
+ * Record detail service: layout (REST), object metadata (GraphQL), single record (GraphQL).
+ *
+ * getRecordDetail orchestrates layout + objectInfoBatch + getRecordByIdGraphQL for the detail page.
+ * Layout is still REST (uiApiClient); record and object info are GraphQL-backed.
+ *
+ * @module api/objectDetailService
+ */
+
+import { uiApiClient } from "@salesforce/webapp-experimental/api";
+import type { LayoutResponse } from "../types/recordDetail/recordDetail";
+import { LayoutResponseSchema } from "../types/recordDetail/recordDetail";
+import { fetchAndValidate, safeEncodePath } from "../utils/apiUtils";
+import { objectInfoService } from "../api/objectInfoService";
+import type { ObjectInfoResult } from "../types/objectInfo/objectInfo";
+import { getRecordByIdGraphQL, type GraphQLRecordNode } from "../api/recordListGraphQLService";
+import type { Column } from "../types/search/searchResults";
+import { calculateFieldsToFetch } from "../utils/recordUtils";
+
+/** Fallback when record type is unknown. Prefer recordTypeId from the record (e.g. from search or record response) when available. */
+const DEFAULT_RECORD_TYPE_ID = "012000000000000AAA";
+
+/**
+ * Returns field API names to request for a record from the given layout and object metadata.
+ * Used to derive GraphQL columns from layout (detail view). Delegates to recordUtils.calculateFieldsToFetch.
+ *
+ * @param objectMetadata - Object info (fields, relationshipName, etc.).
+ * @param layout - Layout response (sections, layoutItems, layoutComponents).
+ * @returns Array of field API names (e.g. ["Name", "OwnerId", "Owner", "CreatedDate"]).
+ */
+export function extractFieldsFromLayout(
+	objectMetadata: ObjectInfoResult,
+	layout: LayoutResponse,
+): string[] {
+	const [optionalFields] = calculateFieldsToFetch(objectMetadata, layout, false);
+	return optionalFields;
+}
+
+/**
+ * Fetches the Full/View layout for an object (REST). Used by detail view to render sections/rows/items.
+ *
+ * @param objectApiName - Object API name.
+ * @param recordTypeId - Record type Id (default master).
+ * @param signal - Optional abort signal.
+ */
+export async function getLayout(
+	objectApiName: string,
+	recordTypeId: string = DEFAULT_RECORD_TYPE_ID,
+	signal?: AbortSignal,
+): Promise<LayoutResponse> {
+	const params = new URLSearchParams({
+		layoutType: "Full",
+		mode: "View",
+		recordTypeId,
+	});
+	return fetchAndValidate(
+		(abortSignal) =>
+			uiApiClient.get(`/layout/${safeEncodePath(objectApiName)}?${params.toString()}`, {
+				signal: abortSignal,
+			}),
+		{
+			schema: LayoutResponseSchema,
+			errorContext: `layout for ${objectApiName}`,
+			signal,
+		},
+	);
+}
+
+export interface RecordDetailResult {
+	layout: LayoutResponse;
+	record: GraphQLRecordNode;
+	objectMetadata: ObjectInfoResult;
+}
+
+/**
+ * Converts layout-derived optionalFields (field API names) to Column[] for GraphQL node selection.
+ * Uses unqualified names (no entity prefix) so the GraphQL query matches UI API shape.
+ * Other Column fields (label, searchable, sortable) are only required by the type; GraphQL selection uses fieldApiName only.
+ */
+function optionalFieldsToColumns(optionalFields: string[]): Column[] {
+	return optionalFields.map((fieldApiName) => ({
+		fieldApiName,
+		label: "",
+		searchable: false,
+		sortable: false,
+	}));
+}
+
+/**
+ * Fetches everything needed for the detail page: layout (REST), object metadata (GraphQL), single record (GraphQL).
+ * Layout drives which fields are requested; getRecordByIdGraphQL fetches that field set by Id.
+ *
+ * @param objectApiName - Object API name.
+ * @param recordId - Record Id.
+ * @param recordTypeId - Record type (default master).
+ * @param signal - Optional abort signal.
+ * @returns { layout, record, objectMetadata } for DetailForm / UiApiDetailForm.
+ */
+export async function getRecordDetail(
+	objectApiName: string,
+	recordId: string,
+	recordTypeId: string = DEFAULT_RECORD_TYPE_ID,
+	signal?: AbortSignal,
+): Promise<RecordDetailResult> {
+	const layout = await getLayout(objectApiName, recordTypeId, signal);
+	const objectMetadata = await objectInfoService.getObjectInfoBatch(objectApiName, signal);
+	const firstResult = objectMetadata?.results?.[0]?.result;
+	if (!firstResult) {
+		throw new Error(`Object metadata not found for ${objectApiName}`);
+	}
+	// Layout-driven optionalFields (fields shown on the detail layout), not list columns
+	const [optionalFields] = calculateFieldsToFetch(firstResult, layout, false);
+	const columns = optionalFieldsToColumns(optionalFields);
+	const record = await getRecordByIdGraphQL(objectApiName, recordId, columns);
+	if (!record) {
+		throw new Error(`Record not found: ${recordId}`);
+	}
+	return { layout, record, objectMetadata: firstResult };
+}
+
+export const objectDetailService = {
+	extractFieldsFromLayout,
+	getLayout,
+	getRecordDetail,
+};