Skip to content

code-app.md

Latest commit

 

History

History
100 lines (69 loc) · 5.51 KB

code-app.md

File metadata and controls

100 lines (69 loc) · 5.51 KB
Raw

Code App

Customer Portal for Internal Users

The Code App is a small internal React/Vite application for daily customer follow-up.

Implementation Folder

All Code App code and project configuration should be implemented in the root folder code-app/. Documentation and prompt descriptions remain in docs/code-app.md. Do not put source code in docs/ or in the other application folders.

Functionality

  • Show active Account rows in a list.
  • Search by customer name.
  • Filter by city or industry.
  • Select a customer and show basic information.
  • Show the customer's Contact rows.
  • Edit a customer's phone, email, and description.

Scope

The first version does not need advanced navigation, dashboards, or complete CRUD for all columns. The focus is reading, one simple editing flow, and Dataverse integration.

Steps to Create the Code App

1. Prepare the Environment

  • Confirm that Account and Contact exist in the Dataverse environment.
  • Create or select some test customers and contacts.
  • Confirm that the user running the app has read and write access to the required rows.
  • Confirm that the Code Apps tools and selected development environment are available in Visual Studio Code.

2. Create the App Project

  1. Open Code Apps creation in Visual Studio Code or the Power Platform development tools.
  2. Select Dataverse as the data source.
  3. Select a React/Vite project with TypeScript.
  4. Name the project kundeportal.
  5. Select the Dataverse environment containing the demonstration data.
  6. Create the project in the repository and install the dependencies suggested by the template.

The result should be a self-contained frontend project with standard files for React, Vite, TypeScript, and local execution.

3. Connect to Dataverse

  • Add Account and Contact as data sources or connector operations in the app.
  • Use accountid to identify a customer.
  • Use parentcustomerid on Contact to retrieve contacts for the selected customer.
  • Limit queries to the columns required for this demonstration.
  • Handle loading, empty results, and errors in the user interface.

4. Implement the Minimum Functionality

Build the app in this order:

  1. Show a list of active Account rows.
  2. Add search by customer name.
  3. Add filtering by city or industry.
  4. Show the selected customer with name, phone, email, city, and description.
  5. Retrieve and show Contact rows belonging to the selected customer.
  6. Add a simple editing form for the customer's phone, email, and description.
  7. Save the change back to Dataverse and show the result to the user.

5. Run and Test Locally

  • Start the development server with the command defined by the project template, normally npm run dev.
  • Confirm that active customers are shown.
  • Test search and filtering with at least two customers.
  • Select a customer without contacts and confirm that the empty state is clear.
  • Edit a phone number or description, save, and confirm the change in Dataverse.
  • Test that a user without the required access receives an understandable error message.

6. Publish the Code App

  1. Build the app with the project's production command, normally npm run build.
  2. Confirm that the build completes without TypeScript or lint errors.
  3. Publish or upload the Code App to the Power Platform environment using the project's deployment or Power Platform command.
  4. Open the published app as an internal user.
  5. Repeat the main test against the published environment.

Authentication, connector, and publishing details may vary between environments. Verify them against the selected Code Apps project template before the demonstration.

Suggested AI Prompt

Create a simple React/Vite Code App with TypeScript for internal customer follow-up. Use the Dataverse Account and Contact tables. Show active customers in a searchable list, filter by city or industry, show details for the selected customer and contacts related through parentcustomerid. Add editing of the phone, email, and description on Account. Handle loading, empty results, validation, saving, and errors. Keep the solution simple, without a dashboard or advanced navigation.

Recommended Prompt and Agent Sequence

Use the same agent throughout the implementation where possible. Ask the agent to make one change at a time and run a relevant check before the next step.

  1. Planning: "Read docs/code-app.md and map the existing project. Suggest the smallest technical plan for a React/Vite Code App using Account and Contact. Do not write code yet."
  2. Project and data access: "Implement the project structure and Dataverse services from the plan. Use only required columns and show clear loading, empty-result, and error states. Run typecheck or build."
  3. Customer list: "Implement the list of active Account rows with customer-name search and city or industry filtering. Do not implement editing yet. Test that the app builds."
  4. Details and contacts: "Add the selected customer, basic information, and related Contact rows through parentcustomerid. Handle a customer without contacts. Run relevant tests."
  5. Editing: "Add editing of the phone, email, and description on Account. Validate input, save to Dataverse, and show success and error messages. Verify the build and tests."
  6. Final check: "Review the Code App against the requirements in docs/code-app.md. Fix only deviations in this functionality and run build, lint, and tests."

AI Support

AI can be used to create the project structure, Dataverse types, data services, components, and test suggestions from the functional description.