Skip to content

Commit af2c541

Browse files
miquelgallclaude
miquelgall
and
claude
committed
Add new Forms Viewer plugin (019-formsViewer) and update TokenExample
- Create new Forms Viewer plugin for displaying submitted forms for activities - View all submitted forms for a specific activity via OFS API - Filter forms by form label (e.g., "Service Notes") - Sortable columns with dynamic field display - Configurable column order via openParams/securedParams - Uses @ofs-users/plugin ^1.5.0 and @ofs-users/proxy ^1.20.1 - Update 010-TokenExample dependencies - Upgrade @ofs-users/plugin from ^1.4.0 to ^1.5.0 - Upgrade @ofs-users/proxy from ^1.9.0 to ^1.20.0 - Add build scripts for production and development 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
1 parent 92a91e5 commit af2c541

File tree

17 files changed

+9127
-1918
lines changed

17 files changed

+9127
-1918
lines changed

‎samples/010-TokenExample/package-lock.json‎

Lines changed: 40 additions & 1915 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎samples/010-TokenExample/package.json‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,9 @@
88
"description": "Template for Oracle Field Service plugins",
99
"main": "index.js",
1010
"scripts": {
11-
"test": "jest"
11+
"test": "jest",
12+
"build": "webpack --mode production",
13+
"dev": "webpack --mode development"
1214
},
1315
"keywords": [
1416
"ofs",
@@ -29,8 +31,8 @@
2931
"webpack-cli": "^5.0.1"
3032
},
3133
"dependencies": {
32-
"@ofs-users/plugin": "^1.4.0",
33-
"@ofs-users/proxy": "^1.9.0",
34+
"@ofs-users/plugin": "^1.5.0",
35+
"@ofs-users/proxy": "^1.20.0",
3436
"buffer": "^6.0.3"
3537
}
3638
}

‎samples/019-formsViewer/README.md‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
1+
# Forms Viewer Plugin
2+
3+
This Oracle Field Service (OFS) plugin provides a user-friendly interface to view submitted forms for activities, making it easy to review historical form submissions such as notes, checklists, and other activity-related forms.
4+
5+
## Overview
6+
7+
The Forms Viewer plugin allows users to:
8+
- View all submitted forms for a specific activity
9+
- Filter forms by form label (e.g., show only "Service Notes")
10+
- Sort forms by time, user, form label, or submit ID
11+
- Display form details in a readable table format
12+
- Configure which columns to display and in what order
13+
14+
## Features
15+
16+
- **Submitted Forms Display**: Shows all forms submitted for an activity via the OFS API
17+
- **Configurable Filtering**: Filter by specific form labels through secured parameters
18+
- **Sortable Columns**: Click column headers to sort data ascending or descending
19+
- **Customizable Columns**: Configure which columns to display and their order
20+
- **Responsive Design**: Mobile-friendly interface for field use
21+
- **Detailed Form Data**: Displays form details, activity details, and resource details
22+
23+
## Configuration
24+
25+
### Plugin Properties
26+
27+
The plugin expects the following data properties to be configured in OFS:
28+
29+
#### Activity Properties
30+
- `aid` - Activity ID (required)
31+
- `appt_number` - Appointment number (optional, for display)
32+
33+
### Configuration Parameters
34+
35+
The plugin supports configuration via two methods:
36+
1. **openParams** - Dynamic parameters passed when opening the plugin (takes precedence)
37+
2. **securedParams** - Static parameters configured in the plugin descriptor
38+
39+
When both are provided, `openParams` values override `securedParams` values.
40+
41+
#### Available Parameters:
42+
43+
#### FORM_LABEL
44+
- **Description**: Filter forms by specific form label
45+
- **Example**: `Service Notes`
46+
- **Default**: Empty (shows all forms)
47+
- **Use Case**: When you only want to display specific types of forms (e.g., only notes)
48+
49+
#### COLUMN_ORDER
50+
- **Description**: Comma-separated list of columns to display
51+
- **Available Column Types**:
52+
- `time` - Submission timestamp
53+
- `user` - User who submitted the form
54+
- `formLabel` - Form type/label
55+
- `formSubmitId` - Unique submission ID
56+
- `formDetails` - Expands to show each form field as a separate column
57+
- `activityDetails` - Expands to show each activity field as a separate column
58+
- `resourceDetails` - Expands to show each resource field as a separate column
59+
- **Example**: `time,user,formLabel,formDetails`
60+
- **Default**: `time,user,formLabel,formDetails`
61+
- **Note**: When you specify `formDetails`, `activityDetails`, or `resourceDetails`, the plugin automatically creates a column for each field found in the data. For example, if your forms have `SITE_NOTE_TITLE` and `SITE_NOTE_DETAILS` fields, specifying `formDetails` will create two columns with those names.
62+
63+
### Example Configurations
64+
65+
#### Using securedParams (Static Configuration)
66+
67+
```json
68+
{
69+
"properties": {
70+
"activity": ["aid", "appt_number"],
71+
"provider": []
72+
},
73+
"securedParams": [
74+
{
75+
"name": "FORM_LABEL",
76+
"value": "Service Notes"
77+
},
78+
{
79+
"name": "COLUMN_ORDER",
80+
"value": "time,user,formDetails"
81+
}
82+
]
83+
}
84+
```
85+
86+
#### Using openParams (Dynamic Configuration)
87+
88+
When opening the plugin programmatically, you can pass parameters dynamically:
89+
90+
```javascript
91+
// Open plugin with specific form filter
92+
openPlugin({
93+
plugin: "formsViewer",
94+
openParams: {
95+
FORM_LABEL: "Service Notes",
96+
COLUMN_ORDER: "time,user,formDetails"
97+
}
98+
});
99+
100+
// Open plugin showing all forms with different columns
101+
openPlugin({
102+
plugin: "formsViewer",
103+
openParams: {
104+
COLUMN_ORDER: "time,formLabel,activityDetails"
105+
}
106+
});
107+
```
108+
109+
**Note**: `openParams` values override `securedParams`, allowing dynamic behavior while maintaining sensible defaults.
110+
111+
## Usage
112+
113+
### Opening the Plugin
114+
115+
The plugin can be opened from:
116+
1. Activity details screen
117+
2. Custom actions
118+
3. Routing or scheduling screens
119+
120+
### Viewing Forms
121+
122+
1. **Initial Load**: Forms are automatically fetched when the plugin opens
123+
2. **Sorting**: Click any sortable column header to sort by that column
124+
- First click: Sort descending
125+
- Second click: Sort ascending
126+
- Sort indicator (↑/↓) shows current sort direction
127+
3. **Refresh**: Click the "Refresh" button to reload forms from the API
128+
4. **Close**: Click the "Close" button to exit the plugin
129+
130+
### Form Details Display
131+
132+
The plugin dynamically creates columns based on the actual fields present in the submitted forms:
133+
134+
- **Dynamic Columns**: When you include `formDetails` in `COLUMN_ORDER`, the plugin scans all forms and creates a column for each unique field found
135+
- **Field Values**: Each form field value is displayed in its own column
136+
- **Simple Fields**: Text and numeric values displayed directly
137+
- **File References**: Shows filename for file attachments (e.g., signatures, photos)
138+
- **Missing Fields**: Shows "-" when a form doesn't have a particular field
139+
- **Sortable**: All dynamically created columns are sortable
140+
141+
**Example**: If you filter by "Service Notes" forms that have `SITE_NOTE_TITLE` and `SITE_NOTE_DETAILS` fields, the table will display:
142+
- Time | User | Form Label | SITE_NOTE_TITLE | SITE_NOTE_DETAILS
143+
144+
The same applies to `activityDetails` and `resourceDetails` - each field becomes its own column.
145+
146+
## Use Cases
147+
148+
### Service Notes Review
149+
Configure `FORM_LABEL=Service Notes` to create a dedicated notes viewer showing only note submissions with timestamps and details.
150+
151+
### Safety Checklist Audit
152+
Filter by safety checklist form label to review all safety submissions for compliance auditing.
153+
154+
### Complete Form History
155+
Leave `FORM_LABEL` empty and configure `COLUMN_ORDER` to include all columns for a comprehensive view of all activity forms.
156+
157+
### Field Technician Review
158+
Use `time,user,formLabel,formDetails` to provide technicians with a quick overview of relevant form submissions.
159+
160+
## API Integration
161+
162+
The plugin uses the OFS Core API endpoint:
163+
```
164+
GET /rest/ofscCore/v1/activities/{activityId}/submittedForms
165+
```
166+
167+
This endpoint returns:
168+
- Form submission history
169+
- Form details and field values
170+
- Activity context (when available)
171+
- Resource information (when applicable)
172+
- File references (signatures, photos, etc.)
173+
174+
## Technical Requirements
175+
176+
- **@ofs-users/plugin**: ^1.5.0
177+
- **@ofs-users/proxy**: ^1.20.1
178+
- Bootstrap 5.2.2 (loaded via CDN)
179+
- Modern browser with ES6+ support
180+
181+
## Development
182+
183+
### Building
184+
185+
```bash
186+
npm install
187+
npm run build
188+
```
189+
190+
### Testing
191+
192+
```bash
193+
npm test
194+
```
195+
196+
### Deployment
197+
198+
Use the `@ofs-users/plugin-manager` to upload the compiled plugin to your OFS instance:
199+
200+
```bash
201+
plugin-manager upload --plugin ./dist --instance YOUR_INSTANCE
202+
```
203+
204+
## Limitations
205+
206+
- Requires activity ID to be provided
207+
- Forms data is read-only (no editing capability)
208+
- Limited to forms associated with a single activity
209+
- API pagination not currently implemented (shows first 100 forms)
210+
211+
## Version History
212+
213+
| Version | Comments |
214+
|---------|-----------------------------------|
215+
| 1.0.0 | Initial release |
216+
| | - View submitted forms |
217+
| | - Filter by form label |
218+
| | - Sortable columns |
219+
| | - Configurable column order |
220+
221+
## License
222+
223+
Copyright © 2022, 2023, Oracle and/or its affiliates.
224+
Licensed under the Universal Permissive License (UPL), Version 1.0
225+
See [LICENSE](https://oss.oracle.com/licenses/upl/)

‎samples/019-formsViewer/assets/css/forms.css‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
/*
2+
* Copyright © 2022, 2023, Oracle and/or its affiliates.
3+
* Licensed under the Universal Permissive License (UPL), Version 1.0 as shown at https://oss.oracle.com/licenses/upl/
4+
*/
5+
6+
body {
7+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
8+
min-height: 100vh;
9+
display: flex;
10+
flex-direction: column;
11+
}
12+
13+
#form-title {
14+
color: #333;
15+
margin-bottom: 0.5rem;
16+
}
17+
18+
#activity-info {
19+
font-size: 0.9rem;
20+
margin-bottom: 0;
21+
}
22+
23+
.table-responsive {
24+
max-height: 600px;
25+
overflow-y: auto;
26+
}
27+
28+
#forms-table {
29+
font-size: 0.9rem;
30+
}
31+
32+
#forms-table thead {
33+
position: sticky;
34+
top: 0;
35+
background-color: #fff;
36+
z-index: 10;
37+
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1);
38+
}
39+
40+
#forms-table th {
41+
white-space: nowrap;
42+
background-color: #f8f9fa;
43+
font-weight: 600;
44+
border-bottom: 2px solid #dee2e6;
45+
}
46+
47+
#forms-table th[style*="cursor: pointer"]:hover {
48+
background-color: #e9ecef;
49+
}
50+
51+
#forms-table td {
52+
vertical-align: top;
53+
}
54+
55+
.form-details {
56+
font-size: 0.85rem;
57+
line-height: 1.6;
58+
max-width: 400px;
59+
}
60+
61+
.form-details strong {
62+
color: #495057;
63+
font-weight: 600;
64+
}
65+
66+
.spinner-border {
67+
width: 3rem;
68+
height: 3rem;
69+
}
70+
71+
#input_data {
72+
font-family: 'Courier New', monospace;
73+
font-size: 0.8rem;
74+
white-space: pre-wrap;
75+
word-break: break-all;
76+
max-height: 400px;
77+
overflow-y: auto;
78+
background-color: #f8f9fa;
79+
padding: 1rem;
80+
border-radius: 0.25rem;
81+
}
82+
83+
footer {
84+
margin-top: auto;
85+
background-color: #f8f9fa;
86+
border-top: 1px solid #dee2e6;
87+
}
88+
89+
@media (max-width: 768px) {
90+
#forms-table {
91+
font-size: 0.8rem;
92+
}
93+
94+
.form-details {
95+
font-size: 0.75rem;
96+
max-width: 300px;
97+
}
98+
99+
.btn-lg {
100+
padding: 0.5rem 1rem;
101+
font-size: 1rem;
102+
}
103+
}

0 commit comments

Comments
 (0)