CodeApp JS

https://github.com/wyattdave/codeapp-js
Admin
CodeApp JS is a JavaScript-first Power Apps Code Apps workspace with generated Dataverse services...
Tokens:45,664
Snippets:342
Trust Score:8
License:MIT
Update:6 months ago
Show doc for...
Tokens:
Raw
### Install and Verify Power Platform CLI

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/myProfile/readme.md

Install the CLI globally via npm and verify the installation version.

```bash
npm install -g microsoft.powerapps.cli
```

```bash
pac --version
```

--------------------------------

### Start CodeApp Starter App

Source: https://github.com/wyattdave/codeapp-js/blob/main/readme.md

Jump directly to the starter app by running this command. It starts the local development server focused on the codeapp.

```bash
npm run start:codeapp
```

--------------------------------

### Start Local Development Server

Source: https://github.com/wyattdave/codeapp-js/blob/main/readme.md

Start the local development server to serve the repository content. The server runs on port 4173.

```bash
npm start
```

--------------------------------

### Install npm Dependencies

Source: https://github.com/wyattdave/codeapp-js/blob/main/readme.md

Install all project dependencies using npm. Run this command from the repository root.

```bash
npm install
```

--------------------------------

### Install Power Platform CLI

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/apps/planning Poker/additional files/readme.md

Install the Power Platform CLI using npm. This command-line tool is essential for managing Power Platform environments and solutions.

```bash
npm install -g microsoft.powerapps.cli
```

--------------------------------

### Verify Power Platform CLI Installation

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/apps/planning Poker/additional files/readme.md

Verify that the Power Platform CLI has been installed correctly by checking its version.

```bash
pac --version
```

--------------------------------

### Dataverse CRUD Operations Example

Source: https://context7.com/wyattdave/codeapp-js/llms.txt

Demonstrates create, read, update, delete, and list operations for Dataverse tables. Ensure tables are registered via initDataSources() or registerTable() first. listItems returns results wrapped in an { entities: [...] } envelope.

```javascript
import {
  initDataSources,
  createItem,
  getItem,
  listItems,
  updateItem,
  deleteItem
} from './codeapp.js';

function dsEntry(primaryKey) {
  return { tableId: '', version: '', primaryKey, dataSourceType: 'Dataverse', apis: {} };
}

async function dataverseExample() {
  initDataSources({
    contacts: dsEntry('contactid'),
    accounts: dsEntry('accountid')
  });

  // Create a new record
  const newContact = await createItem('contacts', 'contactid', {
    firstname: 'Grace',
    lastname: 'Hopper',
    emailaddress1: 'grace@example.com'
  });

  // Get a single record with select fields
  const contact = await getItem('contacts', 'contactid', newContact.contactid, [
    'firstname',
    'lastname',
    'emailaddress1'
  ]);

  // List records with filtering, ordering, and pagination
  const results = await listItems('contacts', 'contactid', {
    filter: "lastname eq 'Hopper'",
    select: ['firstname', 'lastname', 'createdon'],
    orderBy: 'createdon desc',
    top: 10,
    skip: 0
  });

  console.log('Found contacts:', results.entities.length);

  // Update a record
  await updateItem('contacts', 'contactid', newContact.contactid, {
    jobtitle: 'Computer Scientist'
  });

  // Delete a record
  await deleteItem('contacts', 'contactid', newContact.contactid);
}

dataverseExample();

```

--------------------------------

### Initialize Application

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/apps/solution explorer/agent/mockup-02-dark-glass.html

Triggers the initial render of the solution list.

```javascript
renderSolutions(aSolutions);
```

--------------------------------

### Authenticate and Manage Environments

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/myProfile/readme.md

Commands to create authentication profiles, list existing profiles, select a specific profile, and verify the current environment connection.

```bash
# Authenticate (opens browser for interactive login)
pac auth create --environment https://<yourorg>.crm.dynamics.com

# List auth profiles
pac auth list

# Select an existing profile (if you have multiple)
pac auth select --index <profile-index>

# Confirm you are connected to the correct environment
pac env who
```

--------------------------------

### Verify Power Platform CLI Installation

Source: https://github.com/wyattdave/codeapp-js/blob/main/readme.md

Verify the Power Platform CLI installation from PowerShell. This command checks if the 'pac' command is recognized and displays its properties.

```powershell
Get-Command pac | Format-List
```

--------------------------------

### Initialize and Use Dataverse Operations

Source: https://github.com/wyattdave/codeapp-js/blob/main/readme.md

Demonstrates initializing Dataverse data sources, retrieving environment variables, and performing CRUD operations on contacts. Ensure Dataverse tables and environment variables are configured.

```javascript
import {
  initDataSources,
  createItem,
  getItem,
  listItems,
  updateItem,
  deleteItem,
  getEnvironmentVariable,
  callUnboundAction,
  whoAmI,
} from './codeapp.js';

function dsEntry(primaryKey) {
  return {
    tableId: '',
    version: '',
    primaryKey,
    dataSourceType: 'Dataverse',
    apis: {},
  };
}

async function boot() {
  initDataSources({
    accounts: dsEntry('accountid'),
    contacts: dsEntry('contactid'),
    environmentvariabledefinitions: dsEntry('environmentvariabledefinitionid'),
    environmentvariablevalues: dsEntry('environmentvariablevalueid'),
  });

  const me = await whoAmI();
  const apiBaseUrl = await getEnvironmentVariable('wd_apiBaseUrl');

  const created = await createItem('contacts', 'contactid', {
    firstname: 'Ada',
    lastname: 'Lovelace',
  });

  const contact = await getItem('contacts', 'contactid', created.contactid, ['firstname', 'lastname']);

  const results = await listItems('contacts', 'contactid', {
    select: ['firstname', 'lastname'],
    orderBy: 'lastname asc',
    top: 10,
  });

  await updateItem('contacts', 'contactid', created.contactid, { firstname: 'Augusta Ada' });
  await callUnboundAction('contacts', 'contactid', 'WhoAmI', {});

  console.log(me, apiBaseUrl, contact, results.entities);
}
```

--------------------------------

### Get SQL Tables

Source: https://github.com/wyattdave/codeapp-js/blob/main/AI/skills/sql/SKILL.md

Use `getSqlTables` to discover available tables in a SQL Server database. Requires server and database names.

```javascript
getSqlTables({ server, database })
```

--------------------------------

### Import SharePoint CRUD Helpers

Source: https://github.com/wyattdave/codeapp-js/blob/main/AI/skills/sharepoint/SKILL.md

Import functions for common list operations. This variant omits 'listTables' and is suitable when environment variables are not used for setup.

```javascript
import { getItems, getSpItem, createSpItem, updateSpItem, deleteSpItem } from './sharepoint.js';
```

--------------------------------

### Deploy Code-First App to Dataverse

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/dataverse Demo/readme.md

Deploy the code-first app to your Dataverse environment. This command packages the build output and deploys it as a code component within the specified solution.

```bash
pac code push --solutionName DataverseDemo
```

--------------------------------

### Get Single SQL Row

Source: https://github.com/wyattdave/codeapp-js/blob/main/AI/skills/sql/SKILL.md

Fetch a single row from a SQL Server table by its ID using `getSqlRow`. Requires server, database, table, and row ID.

```javascript
getSqlRow({ server, database, table, id })
```

--------------------------------

### Push App to Power Platform Environment

Source: https://github.com/wyattdave/codeapp-js/blob/main/readme.md

Push your Power App code to your Power Platform environment. This command deploys your app to the specified solution. Replace '<YourSolutionName>' with the name of your solution.

```bash
pac code push --solutionName <YourSolutionName>
```

--------------------------------

### Deploy Code Component

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/myProfile/readme.md

Push the built application code to the specified Dataverse solution.

```bash
pac code push --solutionName MyProfile
```

--------------------------------

### Import SharePoint List Helpers

Source: https://github.com/wyattdave/codeapp-js/blob/main/AI/skills/sharepoint/SKILL.md

Import functions for list operations like getting, creating, updating, and deleting items. This approach uses list IDs directly.

```javascript
import { getItems, getSpItem, createSpItem, updateSpItem, deleteSpItem, listTables } from './sharepoint.js';
```

--------------------------------

### Select Active Environment

Source: https://github.com/wyattdave/codeapp-js/blob/main/readme.md

Select the active Power Platform environment for the current authentication profile. Replace '<environment-id-or-url>' with the desired environment's identifier.

```bash
pac env select --environment "<environment-id-or-url>"
```

--------------------------------

### Get SQL Rows

Source: https://github.com/wyattdave/codeapp-js/blob/main/AI/skills/sql/SKILL.md

Retrieve rows from a SQL Server table using `getSqlRows`. Supports OData-style query options for filtering, sorting, and pagination. Requires server, database, and table names.

```javascript
getSqlRows({ server, database, table, apply, filter, orderBy, skip, top, select })
```

--------------------------------

### Initialize Component Rendering

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/apps/solution explorer/agent/mockup-01-swiss-grid.html

Triggers the initial render of the solution list.

```javascript
/* ── Init ─────────────────────────────────── */ renderSolutions(aSolutions);
```

--------------------------------

### Office 365 Groups Operations Example

Source: https://context7.com/wyattdave/codeapp-js/llms.txt

Demonstrates various operations for managing Office 365 groups, such as listing, adding members, creating events, and restoring deleted groups. Supports raw HTTP requests for advanced Graph API operations.

```javascript
import {
  listMyGroups,
  listOwnedGroups,
  listGroups,
  listGroupMembers,
  addMemberToGroup,
  removeMemberFromGroup,
  createGroupEvent,
  updateGroupEvent,
  deleteGroupEvent,
  listDeletedGroups,
  restoreDeletedGroup,
  openGroupsHttpRequest
} from './connectors/office365groups.js';

async function groupsExample() {
  // List groups the current user is a member of
  const myGroups = await listMyGroups({ version: 3 });
  console.log('My groups:', myGroups.value.map(g => g.displayName));

  // List groups owned by the current user
  const ownedGroups = await listOwnedGroups();

  // Search for groups with filtering
  const groups = await listGroups({
    $filter: "startswith(displayName, 'Project')",
    $top: 10
  });

  const groupId = groups.value[0].id;

  // List group members
  const members = await listGroupMembers(groupId);
  console.log('Members:', members.value.length);

  // Add a member to a group
  await addMemberToGroup('newuser@contoso.com', groupId);

  // Remove a member from a group
  await removeMemberFromGroup('olduser@contoso.com', groupId);

  // Create a group event
  const event = await createGroupEvent(groupId, {
    subject: 'Team Meeting',
    body: { contentType: 'HTML', content: '<p>Weekly sync</p>' },
    start: { dateTime: '2024-01-20T14:00:00', timeZone: 'UTC' },
    end: { dateTime: '2024-01-20T15:00:00', timeZone: 'UTC' }
  });

  // Update a group event
  await updateGroupEvent(event.id, {
    subject: 'Team Meeting - Updated'
  }, groupId);

  // Delete a group event
  await deleteGroupEvent(event.id, groupId);

  // List deleted groups (for restore)
  const deletedGroups = await listDeletedGroups();

  // Restore a deleted group
  if (deletedGroups.value.length > 0) {
    await restoreDeletedGroup(deletedGroups.value[0].id);
  }

  // Make raw HTTP request for advanced operations
  const response = await openGroupsHttpRequest({
    uri: `/groups/${groupId}/conversations`,
    method: 'GET'
  });
}

groupsExample();
```

--------------------------------

### Render Solution Details

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/apps/solution explorer/agent/mockup-02-dark-glass.html

Populates the detail panel with solution metadata and grouped component chips.

```javascript
function renderDetail(sol) { var ePanel = document.getElementById('detailPanel'); var aComps = oSolutionComponents[sol.solutionid] || []; var oGroups = {}; aComps.forEach(function(c) { var sType = oComponentMap[c.componenttype] || ('Type ' + c.componenttype); if (!oGroups[sType]) oGroups[sType] = []; oGroups[sType].push(c); }); var sHTML = '<div class="detail-title">' + sol.friendlyname + '</div>' + '<div class="detail-sub">' + sol.uniquename + ' · v' + sol.version + ' · ' + (sol.ismanaged ? 'Managed' : 'Unmanaged') + ' · ' + formatDate(sol.modifiedon) + '</div>'; if (sol.description) { sHTML += '<div class="detail-desc">' + sol.description + '</div>'; } var iChipDelay = 0; Object.keys(oGroups).sort().forEach(function(sType) { sHTML += '<div class="comp-section-label">' + sType + ' (' + oGroups[sType].length + ')</div>'; sHTML += '<div class="comp-chips">'; oGroups[sType].forEach(function(c) { sHTML += '<div class="comp-chip" style="animation-delay:' + (iChipDelay * 0.04) + 's">' + c.name + '</div>'; iChipDelay++; }); sHTML += '</div>'; }); ePanel.innerHTML = sHTML; }
```

--------------------------------

### Office 365 Users Operations Example

Source: https://context7.com/wyattdave/codeapp-js/llms.txt

Demonstrates various operations for managing Office 365 user profiles, including retrieving profiles, managers, direct reports, photos, and searching for users. Supports raw HTTP requests for advanced Graph API operations.

```javascript
import {
  getMyProfile,
  getUserProfile,
  getManager,
  getDirectReports,
  updateMyProfile,
  getUserPhoto,
  getUserPhotoMetadata,
  searchForUsers,
  getRelevantPeople,
  getMyTrendingDocuments,
  openUsersHttpRequest
} from './connectors/office365users.js';

async function usersExample() {
  // Get current user's profile
  const myProfile = await getMyProfile({
    $select: 'displayName,mail,jobTitle,department,officeLocation'
  });
  console.log('My name:', myProfile.displayName);

  // Get another user's profile
  const userProfile = await getUserProfile('user@contoso.com', {
    $select: 'displayName,mail,jobTitle'
  });

  // Get user's manager
  const manager = await getManager(myProfile.id);
  console.log('Manager:', manager.displayName);

  // Get direct reports
  const reports = await getDirectReports(myProfile.id, {
    top: 50,
    $select: 'displayName,jobTitle'
  });

  // Update current user's profile
  await updateMyProfile({
    aboutMe: 'Software Engineer focused on Power Platform',
    skills: ['JavaScript', 'Power Apps', 'Dataverse']
  });

  // Search for users
  const searchResults = await searchForUsers({
    searchTerm: 'John',
    top: 10
  });
  console.log('Found users:', searchResults.value.length);

  // Get relevant people (based on communication patterns)
  const relevantPeople = await getRelevantPeople(myProfile.id);

  // Get user photo metadata
  const photoMeta = await getUserPhotoMetadata(userProfile.id);

  // Get user photo (returns binary)
  const photo = await getUserPhoto(userProfile.id);

  // Get trending documents
  const trending = await getMyTrendingDocuments({ $top: 5 });

  // Make raw HTTP request for advanced operations
  const response = await openUsersHttpRequest({
    uri: `/users/${myProfile.id}/presence`,
    method: 'GET'
  });
}

usersExample();
```

--------------------------------

### Deploy Code Component to Power Platform Solution

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/apps/planning Poker/additional files/readme.md

Push the application code to your Power Platform environment. This command packages the build output and deploys it as a code component within the specified solution.

```bash
pac code push --solutionName PlanningPoker
```

--------------------------------

### Initialize Data Sources

Source: https://github.com/wyattdave/codeapp-js/blob/main/AI/skills/dataverse/SKILL.md

Use initDataSources to register multiple tables at once before performing Dataverse operations. This is the preferred method when the table set is known upfront.

```javascript
import { initDataSources } from './codeapp.js';

function dsEntry(sPrimaryKey) {
  return { tableId: '', version: '', primaryKey: sPrimaryKey, dataSourceType: 'Dataverse', apis: {} };
}

initDataSources({
  accounts: dsEntry('accountid'),
  contacts: dsEntry('contactid')
});
```

--------------------------------

### Deploy Code Component

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/outlook Demo/readme.md

Command to package and deploy the application build output to the target Dataverse solution.

```bash
pac code push --solutionName OutlookInbox
```

--------------------------------

### Add Data Source Files

Source: https://github.com/wyattdave/codeapp-js/blob/main/readme.md

Add Dataverse data source files to your project. This command links a connection to your project's data sources. Replace '<connection-name>' and '<connection-id>' with your specific values.

```bash
pac code add-data-source -a "<connection-name>" -c "<connection-id>"
```

--------------------------------

### Define Mock Data Structures

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/apps/solution explorer/agent/mockup-01-swiss-grid.html

Initializes arrays and objects containing solution metadata, component type definitions, and component mappings for Dataverse environments.

```javascript
/* ── Mock Data ────────────────────────────── */ var aSolutions = [ { solutionid: 'a1b2c3d4-0001', friendlyname: 'Core Data Model', uniquename: 'CoreDataModel', version: '3.2.0.1', ismanaged: false, modifiedon: '2026-03-18T14:22:00Z', description: 'Foundation entities, relationships, and business rules for the organisation data model.' }, { solutionid: 'a1b2c3d4-0002', friendlyname: 'Customer Portal', uniquename: 'CustomerPortal', version: '1.8.4.0', ismanaged: false, modifiedon: '2026-03-20T09:45:00Z', description: 'Portal components including web resources, forms, and site maps for the customer-facing application.' }, { solutionid: 'a1b2c3d4-0003', friendlyname: 'Dynamics 365 Sales', uniquename: 'msdyn_Sales', version: '9.0.24031.1002', ismanaged: true, modifiedon: '2026-01-15T00:00:00Z', description: 'Microsoft Dynamics 365 Sales managed solution.' }, { solutionid: 'a1b2c3d4-0004', friendlyname: 'Approval Workflows', uniquename: 'ApprovalWorkflows', version: '2.1.0.0', ismanaged: false, modifiedon: '2026-03-12T11:30:00Z', description: 'Cloud flows and business process flows for multi-stage approval routing.' }, { solutionid: 'a1b2c3d4-0005', friendlyname: 'Power BI Dashboards', uniquename: 'PowerBIDashboards', version: '1.0.3.0', ismanaged: true, modifiedon: '2026-02-28T16:00:00Z', description: 'Embedded Power BI dashboards and charts for executive reporting.' }, { solutionid: 'a1b2c3d4-0006', friendlyname: 'Security Configuration', uniquename: 'SecurityConfig', version: '4.0.0.2', ismanaged: false, modifiedon: '2026-03-21T08:15:00Z', description: 'Security roles, field-level security profiles, and team templates.' }, { solutionid: 'a1b2c3d4-0007', friendlyname: 'Email Templates Pack', uniquename: 'EmailTemplates', version: '1.3.1.0', ismanaged: true, modifiedon: '2025-12-10T10:00:00Z', description: 'Standardised email templates for customer communications.' }, { solutionid: 'a1b2c3d4-0008', friendlyname: 'Integration Hub', uniquename: 'IntegrationHub', version: '2.5.0.0', ismanaged: false, modifiedon: '2026-03-19T15:42:00Z', description: 'Custom connectors, plugins, and webhook configurations for third-party integrations.' }, { solutionid: 'a1b2c3d4-0009', friendlyname: 'Canvas Apps Collection', uniquename: 'CanvasApps', version: '1.1.0.0', ismanaged: false, modifiedon: '2026-03-17T13:20:00Z', description: 'Suite of canvas apps for field workers and mobile scenarios.' }, { solutionid: 'a1b2c3d4-0010', friendlyname: 'Dataverse Accelerator', uniquename: 'DataverseAccelerator', version: '1.0.0.1', ismanaged: true, modifiedon: '2026-01-05T00:00:00Z', description: 'Microsoft accelerator components for rapid Dataverse development.' }, { solutionid: 'a1b2c3d4-0011', friendlyname: 'Field Service Extensions', uniquename: 'FSExtensions', version: '2.0.1.0', ismanaged: false, modifiedon: '2026-03-15T10:30:00Z', description: 'Custom entities, forms, and business rules extending Dynamics 365 Field Service.' }, { solutionid: 'a1b2c3d4-0012', friendlyname: 'AI Builder Models', uniquename: 'AIBuilderModels', version: '1.2.0.0', ismanaged: true, modifiedon: '2026-02-20T09:00:00Z', description: 'Pre-trained and custom AI Builder models for document processing and prediction.' }, ]; var oComponentMap = { 1: 'Entity', 2: 'Attribute', 9: 'Option Set', 10: 'Entity Relationship', 20: 'Security Role', 24: 'Workflow', 25: 'Report', 26: 'Connection Role', 29: 'Site Map', 31: 'System Form', 36: 'Dashboard', 59: 'Chart', 61: 'Web Resource', 62: 'Plugin Type', 63: 'Plugin Assembly', 65: 'SDK Message Step', 70: 'Model-driven App', 80: 'Canvas App', 300: 'Cloud Flow' }; var oSolutionComponents = { 'a1b2c3d4-0001': [ { componenttype: 1, objectid: 'e001', name: 'account' }, { componenttype: 1, objectid: 'e002', name: 'contact' }, { componenttype: 1, objectid: 'e003', name: 'cr8b2_project' }, { componenttype: 1, objectid: 'e004', name: 'cr8b2_milestone' }, { componenttype: 2, objectid: 'a001', name: 'cr8b2_project.cr8b2_status' }, { componenttype: 2, objectid: 'a002', name: 'cr8b2_project.cr8b2_startdate' }, { componenttype: 10, objectid: 'r001', name: 'cr8b2_project_account' }, { componenttype: 9, objectid: 'o001', name: 'cr8b2_projectstatus' }, ], 'a1b2c3d4-0002': [ { componenttype: 61, objectid: 'w001', name: 'portal_main.js' }, { componenttype: 61, objectid: 'w002', name: 'portal_styles.css' }, { componenttype: 61, objectid: 'w003', name: 'portal_home.html' }, { componenttype: 31, objectid: 'f001', name: 'Contact - Portal Main Form' }, { componenttype: 31, objectid: 'f002', name: 'Case - Portal Quick Create' }, { componenttype: 29, objectid: 's001', name: 'Portal Site Map' }, { componenttype: 70, objectid: 'ap01', name: 'Customer Self-Service' }, ], 'a1b2c3d4-0003': [ { componenttype: 1, objectid: 'e010', name: 'opportunity' }, { componenttype: 1, objectid: 'e011', name: 'quote' }, { componenttype: 1, objectid: 'e012', name: 'salesorder' }, { componenttype: 1, objectid: 'e013', name: 'invoice' }, { componentty
```

--------------------------------

### Solution Components - Solution 7

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/apps/solution explorer/agent/mockup-02-dark-glass.html

Lists components belonging to solution 'a1b2c3d4-0007', containing HTML web resources for templates.

```javascript
'a1b2c3d4-0007': [ { componenttype: 61, objectid: 'w010', name: 'template_welcome.html' }, { componenttype: 61, objectid: 'w011', name: 'template_invoice.html' }, { componenttype: 61, objectid: 'w012', name: 'template_reminder.html' }, ],
```

--------------------------------

### Authenticate with Dataverse Environment

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/dataverse Demo/readme.md

Create a new authentication profile for your Dataverse environment. This command will open a browser for interactive login.

```bash
pac auth create --environment https://<yourorg>.crm.dynamics.com
```

--------------------------------

### Solution Components - Solution 5

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/apps/solution explorer/agent/mockup-02-dark-glass.html

Lists components belonging to solution 'a1b2c3d4-0005', focusing on dashboards and charts for performance overview.

```javascript
'a1b2c3d4-0005': [ { componenttype: 36, objectid: 'd010', name: 'Executive Overview' }, { componenttype: 36, objectid: 'd011', name: 'Sales Performance' }, { componenttype: 36, objectid: 'd012', name: 'Service Metrics' }, { componenttype: 59, objectid: 'ch10', name: 'Pipeline Funnel' }, ],
```

--------------------------------

### Render Solution List

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/apps/solution explorer/agent/mockup-04-neon-noir.html

Populates the solution list container with DOM elements and attaches click event listeners for detail rendering.

```javascript
function renderSolutions(aFiltered) { var eList = document.getElementById('solList'); eList.innerHTML = ''; aFiltered.forEach(function(sol, i) { var div = document.createElement('div'); div.className = 'sol-item'; div.style.animationDelay = (i * 0.035) + 's'; div.innerHTML = '<div class="sol-top-row">' + '<span class="sol-name">' + sol.friendlyname + '</span>' + '<span class="sol-badge ' + (sol.ismanaged ? 'managed' : 'unmanaged') + '">' + (sol.ismanaged ? 'MGD' : 'UNM') + '</span>' + '</div>' + '<div class="sol-sub">' + sol.uniquename + ' &middot; v' + sol.version + ' &middot; ' + formatDate(sol.modifiedon) + '</div>'; div.addEventListener('click', function() { document.querySelectorAll('.sol-item').forEach(function(el) { el.classList.remove('active'); }); div.classList.add('active'); renderDetail(sol); }); eList.appendChild(div); }); }
```

--------------------------------

### Configure power.config.json for Environment Variables

Source: https://github.com/wyattdave/codeapp-js/blob/main/AI/skills/environment-variables/SKILL.md

Add the environmentvariabledefinitions and environmentvariablevalues tables to the databaseReferences section.

```json
{
  "databaseReferences": {
    "default.cds": {
      "dataSources": {
        "environmentvariabledefinitions": {
          "entitySetName": "environmentvariabledefinitions",
          "logicalName": "environmentvariabledefinition",
          "isHidden": false
        },
        "environmentvariablevalues": {
          "entitySetName": "environmentvariablevalues",
          "logicalName": "environmentvariablevalue",
          "isHidden": false
        }
      }
    }
  }
}
```

--------------------------------

### Select Power Platform Authentication Profile

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/apps/planning Poker/additional files/readme.md

Select an existing authentication profile by its index. Use this command if you have multiple profiles and need to switch between them.

```bash
# Select an existing profile (if you have multiple)
pac auth select --index <profile-index>
```

--------------------------------

### Solution Components - Solution 6

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/apps/solution explorer/agent/mockup-02-dark-glass.html

Lists components belonging to solution 'a1b2c3d4-0006', detailing various security roles.

```javascript
'a1b2c3d4-0006': [ { componenttype: 20, objectid: 'sr01', name: 'Sales Manager' }, { componenttype: 20, objectid: 'sr02', name: 'Service Agent' }, { componenttype: 20, objectid: 'sr03', name: 'System Administrator' }, { componenttype: 20, objectid: 'sr04', name: 'Read-Only User' }, { componenttype: 20, objectid: 'sr05', name: 'Finance Approver' }, ],
```

--------------------------------

### Authenticate with Power Platform Environment

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/apps/planning Poker/additional files/readme.md

Create an authentication profile to connect to your Power Platform environment. This typically involves an interactive browser-based login.

```bash
# Authenticate (opens browser for interactive login)
pac auth create --environment https://<yourorg>.crm.dynamics.com
```

--------------------------------

### Solution Components - Solution 1

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/apps/solution explorer/agent/mockup-02-dark-glass.html

Lists components belonging to solution 'a1b2c3d4-0001', including entities, attributes, relationships, and option sets.

```javascript
var oSolutionComponents = { 'a1b2c3d4-0001': [ { componenttype: 1, objectid: 'e001', name: 'account' }, { componenttype: 1, objectid: 'e002', name: 'contact' }, { componenttype: 1, objectid: 'e003', name: 'cr8b2_project' }, { componenttype: 1, objectid: 'e004', name: 'cr8b2_milestone' }, { componenttype: 2, objectid: 'a001', name: 'cr8b2_project.cr8b2_status' }, { componenttype: 2, objectid: 'a002', name: 'cr8b2_project.cr8b2_startdate' }, { componenttype: 10, objectid: 'r001', name: 'cr8b2_project_account' }, { componenttype: 9, objectid: 'o001', name: 'cr8b2_projectstatus' }, ],
```

--------------------------------

### Solution Components - Solution 10

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/apps/solution explorer/agent/mockup-02-dark-glass.html

Lists components belonging to solution 'a1b2c3d4-0010', including entities, web resources, and model-driven apps for accelerators.

```javascript
'a1b2c3d4-0010': [ { componenttype: 1, objectid: 'e030', name: 'cr8b2_acceleratorconfig' }, { componenttype: 61, objectid: 'w020', name: 'accelerator_bundle.js' }, { componenttype: 70, objectid: 'ap10', name: 'Accelerator Studio' }, ],
```

--------------------------------

### Create Dataverse Connection

Source: https://github.com/wyattdave/codeapp-js/blob/main/readme.md

Create a new Dataverse connection using service principal credentials. Ensure you replace the placeholder values with your actual application ID, client secret, and tenant ID.

```bash
pac connection create --name "<connection-name>" --application-id "<app-id>" --client-secret "<client-secret>" --tenant-id "<tenant-id>"
```

--------------------------------

### Style Solution Tile Grid

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/apps/solution explorer/agent/mockup-05-zen-garden.html

Creates a responsive grid for solution tiles, ensuring they adapt to different screen sizes. Uses `repeat(auto-fill, minmax(280px, 1fr))` for automatic column fitting.

```css
/* ── Solutions as card tiles ──────────────── */
.sol-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
```

--------------------------------

### Manage Jira Issue Operations

Source: https://context7.com/wyattdave/codeapp-js/llms.txt

Demonstrates creating, updating, transitioning, and querying Jira issues. Requires the jira connector module and a valid instance URL.

```javascript
import {
  listJiraProjects,
  listJiraIssues,
  getJiraIssueByKey,
  createJiraIssue,
  updateJiraIssue,
  addJiraComment,
  listJiraIssueTypes,
  listJiraStatuses,
  listJiraTransitions,
  transitionJiraIssue,
  getCurrentJiraUser
} from './connectors/jira.js';

async function jiraExample() {
  const jiraInstance = 'your-company.atlassian.net';

  // Get current Jira user
  const user = await getCurrentJiraUser({ jiraInstance });
  console.log('Logged in as:', user.displayName);

  // List all projects
  const projects = await listJiraProjects({ jiraInstance });
  const projectKey = projects.values[0].key;

  // List issue types for a project
  const issueTypes = await listJiraIssueTypes({ jiraInstance, projectKey });
  const bugType = issueTypes.find(t => t.name === 'Bug');

  // Create a new issue
  const newIssue = await createJiraIssue({
    jiraInstance,
    projectKey,
    issueTypeId: bugType.id,
    summary: 'Login page not loading',
    description: 'Users report the login page shows a blank screen.',
    priority: { name: 'High' }
  });

  console.log('Created issue:', newIssue.key);

  // List issues using JQL
  const issues = await listJiraIssues({
    jiraInstance,
    jql: `project = ${projectKey} AND status = "Open" ORDER BY created DESC`,
    fields: 'summary,status,assignee,priority'
  });

  // Get issue details
  const issue = await getJiraIssueByKey(newIssue.key, jiraInstance);

  // Add a comment to an issue
  await addJiraComment(newIssue.key, 'Investigating this issue now.', jiraInstance);

  // Update issue fields
  await updateJiraIssue(newIssue.key, {
    jiraInstance,
    fields: {
      summary: 'Login page not loading - URGENT',
      labels: ['critical', 'frontend']
    }
  });

  // Get available transitions
  const transitions = await listJiraTransitions(newIssue.key, { jiraInstance });
  const inProgressTransition = transitions.transitions.find(t => t.name === 'In Progress');

  // Transition the issue
  await transitionJiraIssue(newIssue.key, {
    jiraInstance,
    transition: { id: inProgressTransition.id }
  });

  // List statuses for project
  const statuses = await listJiraStatuses({ jiraInstance, projectId: projects.values[0].id });
  console.log('Available statuses:', statuses.map(s => s.name));
}

jiraExample();
```

--------------------------------

### Render Solution Tiles and Detail Drawer

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/apps/solution explorer/agent/mockup-05-zen-garden.html

Functions for formatting dates, rendering the solution grid, and managing the detail drawer overlay.

```javascript
ion_model' }, { componenttype: 300, objectid: 'cf30', name: 'Process Incoming Documents' }, ], }; /* ── Helpers ──────────────────────────────── */ function formatDate(sISO) { var d = new Date(sISO); return d.toLocaleDateString('en-GB', { day: '2-digit', month: 'short', year: 'numeric' }); } /* ── Render Solution Tiles ────────────────── */ function renderSolutions(aFiltered) { var eGrid = document.getElementById('solGrid'); eGrid.innerHTML = ''; aFiltered.forEach(function(sol, i) { var div = document.createElement('div'); div.className = 'sol-tile'; div.style.animationDelay = (i * 0.05) + 's'; div.innerHTML = '<div class="sol-tile-top">' + '<span class="sol-tile-name">' + sol.friendlyname + '</span>' + '<span class="sol-tile-badge ' + (sol.ismanaged ? 'managed' : 'unmanaged') + '">' + (sol.ismanaged ? 'Managed' : 'Unmanaged') + '</span>' + '</div>' + '<div class="sol-tile-meta">' + sol.uniquename + ' &middot; ' + formatDate(sol.modifiedon) + '</div>' + '<span class="sol-tile-version">v' + sol.version + '</span>'; div.addEventListener('click', function() { document.querySelectorAll('.sol-tile').forEach(function(el) { el.classList.remove('active'); }); div.classList.add('active'); openDetail(sol); }); eGrid.appendChild(div); }); } /* ── Open Detail Drawer ───────────────────── */ function openDetail(sol) { var eOverlay = document.getElementById('detailOverlay'); var eDrawer = document.getElementById('detailDrawer'); var aComps = oSolutionComponents[sol.solutionid] || []; var oGroups = {}; aComps.forEach(function(c) { var sType = oComponentMap[c.componenttype] || ('Type ' + c.componenttype); if (!oGroups[sType]) oGroups[sType] = []; oGroups[sType].push(c); }); var sHTML = '<button class="detail-close" id="closeBtn">&larr; Back to solutions</button>' + '<div class="detail-title">' + sol.friendlyname + '</div>' + '<div class="detail-meta">' + sol.uniquename + ' &middot; v' + sol.version + '<br>' + (sol.ismanaged ? 'Managed' : 'Unmanaged') + ' &middot; Modified ' + formatDate(sol.modifiedon) + '</div>'; if (sol.description) { sHTML += '<div class="detail-desc">' + sol.description + '</div>'; } var iDelay = 0; Object.keys(oGroups).sort().forEach(function(sType) { sHTML += '<div class="comp-label">' + '<span class="dot"></span>' + sType + ' <span class="count">(' + oGroups[sType].length + ')</span>' + '</div>' + '<div class="comp-list">'; oGroups[sType].forEach(function(c) { sHTML += '<div class="comp-item" style="animation-delay:' + (iDelay * 0.04) + 's">' + '<span>' + c.name + '</span>' + '<span class="comp-item-id">' + c.objectid + '</span>' + '</div>'; iDelay++; }); sHTML += '</div>'; }); eDrawer.innerHTML = sHTML; eOverlay.classList.add('open'); document.getElementById('closeBtn').addEventListener('click', function() { eOverlay.classList.remove('open'); }); } /* Close drawer on background click */ document.getElementById('detailOverlay').addEventListener('click', function(evt) { if (evt.target === this) { this.classList.remove('open'); } }); /* ── Search ───────────────────────────────── */ document.getElementById('searchInput').addEventListener('input', function(evt) { var sQuery = evt.target.value.toLowerCase(); var aFiltered = aSolutions.filter(function(s) { return s.friendlyname.toLowerCase().indexOf(sQuery) !== -1 || s.uniquename.toLowerCase().indexOf(sQuery) !== -1; }); renderSolutions(aFiltered); }); /* ── Init ─────────────────────────────────── */ renderSolutions(aSolutions);
```

--------------------------------

### Configure SQL Connection Reference

Source: https://github.com/wyattdave/codeapp-js/blob/main/AI/skills/sql/SKILL.md

Define a connection reference for the SQL Server connector in `power.config.json`. Ensure the `dataSources` array includes 'sql' to align with the wrapper's data source name.

```json
{
  "connectionReferences": {
    "sqlConnection": {
      "id": "/providers/Microsoft.PowerApps/apis/shared_sql",
      "displayName": "SQL Server",
      "dataSources": ["sql"],
      "dataSets": {}
    }
  }
}
```

--------------------------------

### List Dataverse Connections

Source: https://github.com/wyattdave/codeapp-js/blob/main/readme.md

List all available Dataverse connections in the currently selected Power Platform environment. This is useful for identifying existing connections.

```bash
pac connection list
```

--------------------------------

### Configure Copilot Skills

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/myProfile/readme.md

Path for placing the SKILL.md file to enable Copilot knowledge for code-first apps.

```text
~/.copilot/skills/office365UsersCodeApp/SKILL.md
```

--------------------------------

### Solution Components - Solution 2

Source: https://github.com/wyattdave/codeapp-js/blob/main/examples/apps/solution explorer/agent/mockup-02-dark-glass.html

Lists components belonging to solution 'a1b2c3d4-0002', including web resources, forms, sitemaps, and model-driven apps.

```javascript
'a1b2c3d4-0002': [ { componenttype: 61, objectid: 'w001', name: 'portal_main.js' }, { componenttype: 61, objectid: 'w002', name: 'portal_styles.css' }, { componenttype: 61, objectid: 'w003', name: 'portal_home.html' }, { componenttype: 31, objectid: 'f001', name: 'Contact - Portal Main Form' }, { componenttype: 31, objectid: 'f002', name: 'Case - Portal Quick Create' }, { componenttype: 29, objectid: 's001', name: 'Portal Site Map' }, { componenttype: 70, objectid: 'ap01', name: 'Customer Self-Service' }, ],
```
Tokens:
Raw