skills.rest
microsoft
microsoftOFFICIAL
Explore all skills by this author →
Website𝕏@OpenAtMicrosoftGitHub

add-pen-input

Generates a React Native wrapper for pen, signature, and ink capture in Power Apps mobile apps.

808|167|Updated Jan 21, 2026
Search Tags:#react native#mobile app#typeScript#Dataverse#signature capture#Power Apps#pen input
One-click install
npx skills add https://github.com/microsoft/power-platform-skills --skill add-pen-input
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: add-pen-input
Source: https://github.com/microsoft/power-platform-skills/tree/main/plugins/mobile-apps/skills/add-native/add-pen-input
Command: npx skills add https://github.com/microsoft/power-platform-skills --skill add-pen-input

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @microsoft/power-apps-native-pen-input.

What problem does it solve?

Adding native pen input, signature, or handwriting capture to a Power Apps mobile app requires correctly wrapping the @microsoft/power-apps-native-pen-input native module, handling cancellation and missing-module cases, and avoiding the incompatible HostingSDK/PCF path.

Core Features & Use Cases

  • Native Wrapper Generation: Creates or verifies src/native/penInput.ts, a TypeScript wrapper that returns a discriminated union and never throws.
  • Cancellation-Safe Results: Distinguishes user cancellation (USER_CANCELLED) from real failures and missing native modules (NATIVE_MODULE_MISSING).
  • Dataverse Integration: Shows how to save captured PNG signatures to Dataverse Image or File columns using generated services.
  • Use Case: A field technician app needs a customer signature on a work order; this Skill adds the capture flow, displays the PNG, and saves it to a Dataverse image column.

Quick Start

Ask the agent to add pen input or signature capture to your Power Apps mobile app via the /add-native pen-input command.

Frequently Asked Questions about add-pen-input

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add signature capture to a Power Apps mobile app?▼

Use the /add-native pen-input command, which generates a src/native/penInput.ts wrapper around @microsoft/power-apps-native-pen-input. Call captureSignature() from your screens to get a PNG data URI you can display or save.

How do I save a captured signature to a Dataverse image column?▼

Strip the data URI prefix with stripDataUriPrefix, then pass the raw base64 string to the generated service's update method for the image column. For File columns, save the parent row first and upload the bytes through the generated service helper.

Can I install @microsoft/power-apps-native-pen-input with npm install?▼

No. The package contains native iOS/Android code and must already ship in the app's native build. This Skill stops if the package is missing from package.json and will not run npm install, expo install, or pod install.

Why should I not use PenInputExtension or the HostingSDK path?▼

The HostingSDK/PCF path in the package README targets a different use case. In Power Apps native code apps, you must use the native React Native API (PenInputNative.capturePenInput) instead of registering PenInputExtension or wiring Companion PCF.

What happens when a user cancels the pen input capture?▼

Cancellation returns { ok: false, reason: 'USER_CANCELLED' } and is treated as a non-error path. Screens should leave current state unchanged and avoid showing failure banners for cancellations.

Related Skills

Explore More Software Engineering Skills→
TekLabsVNTekLabsVN
1

web-to-mobile

Convert an existing web project into an Expo mobile app with wired authentication.

Official
Advanced
spm1001spm1001

looking

Capture application windows or full screen as timestamped PNG files.

Community
Intermediate
Arupbiswas09Arupbiswas09

react-native-vision-camera

Capture images and videos with live preview in React Native apps.

Community
Advanced
samibrahmisamibrahmi

mobile-ui

Build responsive mobile UIs with Expo Native UI patterns.

Community
Intermediate