PCF Components: Package, Deploy & Advanced Features

From code to production

The deployment pipeline

Step 1: Build

npm run build    # Compiles TypeScript, bundles resources

Step 2: Quick push (development only)

pac pcf push --publisher-prefix nova    # Pushes directly to connected environment

This is fast for development but creates an unmanaged component. Not for production.

Step 3: Solution packaging (production)

# Create a solution project
pac solution init --publisher-name NovaSoft --publisher-prefix nova

# Add your PCF component as a reference
pac solution add-reference --path ../StarRatingComponent

# Build the solution
dotnet build    # Creates a managed solution ZIP

# Import to target environment
pac solution import --path bin/Release/NovaSoftComponents.zip

Step 4: Consume

• Model-driven app: Open form designer → select a field → choose your custom control from the control list
• Canvas app: Insert → Get more components → Code → select your component

Use pac pcf push for dev speed, solution packaging for everything else

Method	pac pcf push	Solution packaging
Speed	Fast — direct push	Slower — build, package, import
Creates	Unmanaged component in dev env	Managed solution for any environment
ALM friendly	No — not solution-aware	Yes — travels in solutions, supports versioning
Use for	Development and testing	UAT, production, AppSource

Advanced features: Device, Utility, and Web API

PCF components can access platform features beyond basic rendering:

Device API

// Capture an image from the camera
context.device.captureImage({ 
    allowEdit: false, 
    height: 300, 
    width: 300, 
    preferFrontCamera: false 
}).then(
    (fileObject) => {
        // fileObject.fileContent = base64 image data
        // fileObject.fileName, fileObject.fileSize, fileObject.mimeType
        this.displayImage(fileObject.fileContent);
    }
);

// Get current GPS location
context.device.getCurrentPosition().then(
    (position) => {
        // position.coords.latitude, position.coords.longitude
        this.updateMap(position.coords.latitude, position.coords.longitude);
    }
);

Device Feature	Method	Use Case
Camera	captureImage()	Photo capture, document scanning
Barcode scanner	getBarcodeValue()	Inventory, product lookup
GPS	getCurrentPosition()	Location tagging, delivery tracking
File picker	pickFile()	File upload from device

Web API feature

PCF components can perform Dataverse CRUD operations directly:

// Read a record from Dataverse
context.webAPI.retrieveRecord("account", accountId, 
    "?$select=name,revenue"
).then(
    (result) => {
        this.updateDisplay(result.name, result.revenue);
    }
);

// Create a record
context.webAPI.createRecord("annotation", {
    subject: "Photo captured",
    "objectid_account@odata.bind": `/accounts(${accountId})`,
    documentbody: base64ImageData,
    mimetype: "image/png"
});

Utility API

// Open a lookup dialog
context.utils.lookupObjects({
    allowMultiSelect: false,
    entityTypes: ["account"],
    defaultEntityType: "account"
}).then(
    (result) => {
        // result[0].id, result[0].name, result[0].entityType
    }
);

// Get entity metadata
context.utils.getEntityMetadata("contact", ["firstname", "lastname"]).then(
    (metadata) => {
        // Access field display names, types, etc.
    }
);

💡 Scenario: Marcus builds a photo-capture PCF component

Marcus builds a PCF component for field service technicians at a NovaSoft client. When a technician visits a job site:

1. The component displays a “Capture Photo” button
2. Tapping it calls context.device.captureImage() to open the device camera
3. The photo is saved to a Dataverse Note (annotation) via context.webAPI.createRecord()
4. GPS coordinates are captured via context.device.getCurrentPosition() and stored alongside the photo
5. The component shows a thumbnail of the captured photo

This component uses three PCF APIs: Device (camera + GPS), WebAPI (save to Dataverse), and standard rendering (thumbnail display). It works in both model-driven and canvas apps.

Question

What is the difference between pac pcf push and solution packaging?

Click or press Enter to reveal answer

Answer

pac pcf push deploys directly to a dev environment (fast, unmanaged, not solution-aware). Solution packaging creates a managed solution ZIP that can be imported into any environment and supports ALM (versioning, dependencies, upgrades). Use push for dev, solution packaging for production.

Click to flip back

Question

How does a PCF component access the device camera?

Click or press Enter to reveal answer

Answer

Through the Device API: context.device.captureImage(options). Options include allowEdit, height, width, and preferFrontCamera. It returns a Promise with fileContent (base64), fileName, fileSize, and mimeType. This works on mobile devices and desktops with webcams.

Click to flip back

Question

Can a PCF component read and write Dataverse records directly?

Click or press Enter to reveal answer

Answer

Yes — through the Web API feature: context.webAPI.retrieveRecord(), createRecord(), updateRecord(), deleteRecord(), and retrieveMultipleRecords(). This lets the component access data beyond its bound property, like loading related records or saving to annotation tables.

Click to flip back

Knowledge Check

Marcus deploys a PCF component to the test environment using 'pac pcf push'. It works fine. He then tries to include it in a managed solution for production. The solution build fails with 'component not found'. What went wrong?

AThe component needs to be rebuilt before packagingBpac pcf push creates an unmanaged component that is not automatically included in a solution project — he needs to use 'pac solution add-reference' to link the componentCThe component must be published in test before it can be packagedDpac pcf push is not compatible with solution packaging

Check Answer

🎬 Video coming soon

Next up: The Plug-in Pipeline — how Dataverse processes events, execution stages, and the role of Pre/Post Images.