mirror of
https://github.com/forcedotcom/afv-library.git
synced 2026-08-08 16:25:58 +08:00
feat: removing old webapp skills
This commit is contained in:
k-j-kim
parent
5e009c7a6d
commit
73e07e19e7
@ -1,84 +0,0 @@
|
||||
---
|
||||
name: salesforce-web-app-creating-records
|
||||
description: Use this skill when users need to create Salesforce records from React web applications. Trigger when users mention createRecord, creating leads/contacts/custom objects from web apps, handling record IDs, form submissions to Salesforce, or Application__c custom objects. Always use this skill for any record creation from React apps.
|
||||
---
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Use this skill when you need to:
|
||||
- Create Salesforce records from web applications
|
||||
- Implement createRecord functionality for custom or standard objects
|
||||
- Handle record ID extraction from create responses
|
||||
- Troubleshoot deployment errors related to record creation
|
||||
|
||||
|
||||
# Creating Salesforce records (webApplication)
|
||||
|
||||
## Overview
|
||||
Implement list and create functionality for any custom object using GraphQL queries and createRecord API with automatic list refresh.
|
||||
|
||||
## API
|
||||
|
||||
- Use **createRecord** from `@salesforce/webapp-experimental/api`:
|
||||
- `createRecord(objectApiName: string, fields: Record<string, unknown>)` → returns a result object that may contain the new record id in different shapes depending on the API version.
|
||||
|
||||
## Getting the new record id
|
||||
|
||||
The create response is not always a simple `{ id: string }`. Handle both common shapes so you don't get "Create succeeded but no record id returned":
|
||||
|
||||
- Prefer **result.id** when it's a string.
|
||||
- Else read **result.fields.Id.value** (or equivalent) if the API returns the id inside a fields wrapper.
|
||||
|
||||
Example helper:
|
||||
|
||||
```ts
|
||||
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;
|
||||
}
|
||||
```
|
||||
|
||||
Use this after `createRecord()` and return `{ id }` to the caller so the UI can show success or navigate.
|
||||
|
||||
## Field set and org schema
|
||||
|
||||
- **Only send fields that exist in the org.** If you send a field that doesn't exist (e.g. custom field not deployed), the API can return POST body parse errors (e.g. "Field X does not exist").
|
||||
- For **custom objects**, deploy the object and its fields (e.g. via SFDX/CLI or metadata API) before relying on them in the app.
|
||||
- **Fallback:** If you need to capture data that might not have a custom field yet (e.g. contact details), store it in a long text area or similar (e.g. `Employment_Info__c`) as a blob (e.g. JSON or line-based text) so no data is lost and the create still succeeds.
|
||||
|
||||
## Custom objects (e.g. Application__c)
|
||||
|
||||
- Define the object and fields in the project's Salesforce metadata (e.g. `objects/Application__c/`, `fields/*.field-meta.xml`).
|
||||
- In the app, build a `fields` object with only the API names and values you want to set; omit required fields only if they have defaults.
|
||||
- Use a typed input interface and map it to the `fields` passed to `createRecord`; optionally combine contact/extra info into one blob field if some fields might not be deployed.
|
||||
|
||||
## Standard objects (e.g. Lead)
|
||||
|
||||
- Use standard field API names: **FirstName**, **LastName**, **Email**, **Company**, **Phone**, **Description**, **LeadSource**, etc.
|
||||
- **LeadSource** helps distinguish origin (e.g. "Website", "Website Newsletter").
|
||||
- For "Contact Us" → Lead: map subject to **Company** (or a custom field if available), message to **Description**.
|
||||
- For newsletter signup → Lead: set **Email**; use a placeholder **LastName** (e.g. "Newsletter Subscriber") and **Company** (e.g. "Website") so the Lead is valid.
|
||||
|
||||
## Structure
|
||||
|
||||
| Concern | Where |
|
||||
|--------|--------|
|
||||
| Create custom object (e.g. Application) | e.g. `src/api/applicationApi.ts` — `createApplicationRecord(input)` → `createRecord("Application__c", fields)` |
|
||||
| Create standard object (e.g. Lead) | e.g. `src/api/leadApi.ts` — `createContactUsLead(input)`, `createNewsletterLead(email)` |
|
||||
| Form UI | Pages that collect data and call these APIs; show success/error and optionally redirect or reset form |
|
||||
|
||||
## Errors
|
||||
|
||||
- **"Field X does not exist"** → Remove that field from the payload or deploy the field to the org.
|
||||
- **"Create succeeded but no record id returned"** → Use the id-extraction pattern above (result.id or result.fields.Id.value).
|
||||
- **Validation errors** → Return and display the API error message; fix required/invalid values in the form.
|
||||
|
||||
## Verification
|
||||
|
||||
- Deploy object/fields to the org if using custom objects.
|
||||
- Run the create flow in the app; confirm the record appears in the org and the UI shows success and the new id if needed.
|
||||
- Test with minimal required fields first, then add optional or blob fields.
|
||||
@ -1,70 +0,0 @@
|
||||
---
|
||||
name: salesforce-web-app-feature
|
||||
description: Use this skill when users need to add features to Salesforce React web applications. Trigger when users mention adding authentication, search, charts, GraphQL, ShadCN components, Agentforce conversation client, or any feature packages. Also use when users want to install npm packages, copy-then-adjust workflow, or integrate official feature packages. This is the PRIMARY skill for web app features - always prefer official packages listed here.
|
||||
---
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Use this skill when you need to:
|
||||
- Add features to Salesforce React web applications
|
||||
- Install and integrate feature packages (authentication, search, charts, etc.)
|
||||
- Follow copy-then-adjust workflow for feature integration
|
||||
- Troubleshoot deployment errors related to web application features
|
||||
|
||||
|
||||
# Adding a new webApplication feature
|
||||
|
||||
**Always prefer the features listed below.** When the user asks to add auth, search, charts, navigation, GraphQL, shared UI, or Agentforce conversation (ACC/copilot/agent) to a webapp, match their request to one of the official feature packages in the table in section 1. Use those packages first; only build from scratch or use other solutions when no listed feature fits.
|
||||
|
||||
When the user asks to add a feature to their app, follow this workflow.
|
||||
|
||||
When adding a feature, integrating code from an npm package, or bringing in a reference implementation:
|
||||
|
||||
1. **Prefer copying over rewriting.** Use `cp` (or equivalent) to copy files from the source (e.g. `node_modules/<package>/dist/...` or a reference app) into this project. Do not retype or rewrite the same code by hand.
|
||||
|
||||
2. **Then adjust.** After copying, do minimal edits: fix import paths (e.g. change relative `../../` imports to the project's path alias like `@/`), update any app-specific config, and remove or adapt anything that doesn't apply.
|
||||
|
||||
3. **When to copy.** Copy when:
|
||||
- Installing a feature from a template/feature package (e.g. authentication, search, charts).
|
||||
- The package ships full source in `dist/` or `src/` that is meant to be integrated.
|
||||
- You would otherwise be recreating multiple files by reading a reference and typing them out.
|
||||
|
||||
4. **When rewriting is okay.** Only rewrite or create from scratch when:
|
||||
- The source is not file-based (e.g. only docs or snippets).
|
||||
- The integration is a thin wrapper or a single small file.
|
||||
- Copying would pull in a large, unrelated tree and the actual need is a small part of it.
|
||||
|
||||
## 1. Match the request to a feature
|
||||
|
||||
**Prefer these features.** Always check this table first; use the matching package when it fits the user's need.
|
||||
|
||||
Available features (npm packages):
|
||||
|
||||
| Feature | Package | Description | Integration notes |
|
||||
|------------------------------------| ----------------------------------------------------------------------- | ---------------------------------------------------------------------- |-------------------------------------------------------------------------|
|
||||
| **Authentication** | `@salesforce/webapp-template-feature-react-authentication-experimental` | Login, register, password reset, protected routes | Copy-then-adjust; fix imports to `@/`; align with app layout and routes |
|
||||
| **Global search** | `@salesforce/webapp-template-feature-react-global-search-experimental` | Search single Salesforce objects with filters and pagination | Copy-then-adjust; fix imports to `@/`; align with app layout and routes |
|
||||
| **Charts** | `@salesforce/webapp-template-feature-react-chart-experimental` | Recharts line/bar charts with theming (AnalyticsChart, ChartContainer) | Copy-then-adjust; fix imports to `@/`; align with app layout and routes |
|
||||
| **GraphQL data access** | `@salesforce/webapp-template-feature-graphql-experimental` | executeGraphQL utilities, codegen tooling, and example AccountsTable | Copy-then-adjust; fix imports to `@/` and `@api/` |
|
||||
| **Shared UI (shadcn)** | `@salesforce/webapp-template-feature-react-shadcn-experimental` | Button, Card, Input, Select, Table, Tabs, and other ShadCN components | Copy-then-adjust per README/AGENT.md |
|
||||
| **Agentforce conversation client** | `@salesforce/webapp-template-feature-react-agentforce-conversation-client-experimental` | React wrapper for embedded Agentforce conversation client (agent chat UI) via Lightning Out 2.0; automatic auth resolution; `<AgentforceConversationClient />` component | Import from package (not copy) per README/AGENT.md |
|
||||
|
||||
If no feature matches, tell the user and offer to build it from scratch following the project's existing patterns. Do not substitute third-party or custom implementations when one of the features above matches—always prefer the listed packages.
|
||||
|
||||
## 2. Install the npm package
|
||||
|
||||
```bash
|
||||
npm install <package-name>
|
||||
```
|
||||
|
||||
## 3. Read the README.md / AGENT.md
|
||||
|
||||
The `node_modules` folder of the installed package contains a README.md and/or AGENT.md. Load it and follow its instructions.
|
||||
|
||||
## 4. Always validate
|
||||
|
||||
After integrating, **always validate** with:
|
||||
|
||||
```bash
|
||||
npm i && npm run build && npm run dev
|
||||
```
|
||||
@ -1,36 +0,0 @@
|
||||
---
|
||||
name: salesforce-web-app-list-and-create-records
|
||||
description: Use this skill when users need to list and create records for Salesforce custom objects from React web apps. Trigger when users mention list and create patterns, GraphQL queries, refetch after create, form picklists matching object schema, or dashboard widgets showing record lists. Always use this skill for list+create patterns.
|
||||
---
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Use this skill when you need to:
|
||||
- Implement list and create functionality for custom objects
|
||||
- Build GraphQL queries for listing records
|
||||
- Create records and update lists without page reload
|
||||
- Troubleshoot deployment errors related to list and create operations
|
||||
|
||||
|
||||
# List and create records (webApplication)
|
||||
|
||||
## Pattern
|
||||
|
||||
- **List:** Query the object via **GraphQL** (`executeGraphQL`, `uiapi.query.ObjectApiName__c`). Use **webApplicationFeature** (GraphQL) for the connection shape (first/after, edges.node, field `{ value, displayValue }`). Map nodes to a simple summary type; sort client-side by date or other field if needed.
|
||||
- **Create:** Use **createRecord** from `@salesforce/webapp-experimental/api`. See **webApplicationCreatingRecords** for required/optional fields and id handling.
|
||||
- **Hook:** One hook that fetches the list on mount and exposes `refetch`. After a successful create, call `refetch()` so the list updates without a full page reload.
|
||||
- **Form:** Collect only fields that exist on the object. For picklist fields, use option values that **match the object's value set** (e.g. from the object's field metadata or a known value set). Default required picklists (e.g. Status to "New", Priority to "Standard") when the object defines defaults.
|
||||
- **UI:** Table or cards for the list; form above or on a separate route. Show loading and error states for both list and submit. Optional: dashboard widget showing a slice of the list (e.g. first N items) with a "See all" link.
|
||||
|
||||
## Structure (generic)
|
||||
|
||||
| Concern | Where |
|
||||
|--------|--------|
|
||||
| API: list + create | e.g. `src/api/<objectName>Api.ts` — query function (GraphQL) and create function (createRecord) |
|
||||
| Hook: list + refetch | e.g. `src/hooks/use<ObjectName>List.ts` — returns `{ items, loading, error, refetch }` |
|
||||
| Page | Form (controlled inputs, submit → create → refetch) and table/list of items |
|
||||
|
||||
## Cross-references
|
||||
|
||||
- **webApplicationFeature** — Feature packages including GraphQL (connection shape, node shape, field value extraction).
|
||||
- **webApplicationCreatingRecords** — createRecord, id extraction, only send existing fields, picklist/required handling.
|
||||
@ -1,34 +0,0 @@
|
||||
---
|
||||
name: salesforce-web-application
|
||||
description: Directory of web application (React) sub-knowledges for Salesforce React BYO, feature packages, and copy-then-adjust workflow. Use when working with Salesforce web applications.
|
||||
---
|
||||
|
||||
## When to Use This Skill
|
||||
|
||||
Use this skill when you need to:
|
||||
- Work with Salesforce React web applications
|
||||
- Understand available web application features and workflows
|
||||
- Navigate web application knowledge resources
|
||||
- Troubleshoot deployment errors related to web applications
|
||||
|
||||
## Specification
|
||||
|
||||
## Overview
|
||||
|
||||
This skill provides guidance for working with Salesforce React web applications (Salesforce BYO React template). It covers adding features, creating Salesforce records, and listing/creating custom object records.
|
||||
|
||||
## Web Applications — Directory
|
||||
|
||||
This is the **directory** of sub-knowledges for web applications (Salesforce React BYO, feature packages, copy-then-adjust workflow). **Call `get_expert_knowledge` again with one of the topic names below** to load the relevant knowledge.
|
||||
|
||||
## Sub-knowledges (use as `topic` in get_expert_knowledge)
|
||||
|
||||
| Topic name | Use when |
|
||||
|-----------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|
||||
| **webApplicationFeature** | Adding a feature to a webapp: authentication, search, charts, GraphQL, ShadCN, Agentforce conversation client. Feature table, npm install, copy-then-adjust workflow |
|
||||
| **webApplicationCreatingRecords** | Creating Salesforce records: createRecord, custom/standard objects, id handling, Application__c, Lead |
|
||||
| **webApplicationListAndCreateRecords** | List + create any custom object: GraphQL list, createRecord, hook with refetch, form picklists match object |
|
||||
|
||||
**Flow:** After reading this directory, call `get_expert_knowledge({ topic: "<subTopicName>" })` with the single sub-topic that best matches the user's request (e.g. `webApplicationFeature`, `webApplicationCreatingRecords`).
|
||||
|
||||
**Adding features:** Always prefer the feature packages listed in **webApplicationFeature** (authentication, search, charts, nav, GraphQL, ShadCN, Agentforce conversation) over building from scratch or other solutions when one of them matches the request.
|
||||
Loading…
Reference in New Issue
Block a user