본문으로 건너뛰기
cccskills
Microsoft 공식무료GitHub에 공개

add-pdf-viewer

Internal implementation skill invoked by /add-native for native PDF control workflows. Handles HTTPS and file URI PDF viewing with @microsoft/power-apps-native-pdf-viewer 0.2.9+.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

설치 방법 보기

포함된 파일(1)

  • SKILL.md8.9 KB

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

📋 Shared instructions: shared-instructions.md — read first.

Working directory: before any project read or command, execute native-artifact-compatibility.md Step 0. Inherit /add-native's resolved absolute working_dir; bind every shell call and file tool to it, even when this helper starts from another directory.

Add PDF Viewer

Internal helper. Users should invoke /add-native pdf-viewer, /add-native pdf-control, or /add-native @microsoft/power-apps-native-pdf-viewer; /add-native routes here after resolving the capability.

Generate or verify the native PDF viewer wrapper and show how to call its native React Native API. Version 0.2.9 and later support HTTPS PDF URLs and local file:// URIs. Do not use the HostingSDK / PCF path from the package README; that is for a different use case.

Steps

1. Verify app

cd -- '<working_dir>' || { echo "BLOCKED: cannot enter working_dir" >&2; exit 1; }
test -f app.config.js && test -f power.config.json && test -f package.json && test -d src || { echo "BLOCKED: working_dir is not an initialized app" >&2; exit 1; }

If this fails, tell the user to run /create-mobile-app first and STOP.

2. Verify package is already present

cd -- '<working_dir>' || { echo "BLOCKED: cannot enter working_dir" >&2; exit 1; }
node -e "const p=require('./package.json'); const m='@microsoft/power-apps-native-pdf-viewer'; if (!p.dependencies?.[m]) { console.error('MISSING: ' + m + ' is not in package.json. The template/app must already ship this native extension. This skill will not install it or edit native config.'); process.exit(1); } let v; try { v=require('./node_modules/' + m + '/package.json').version; } catch { console.error('MISSING_INSTALL: cannot verify the installed ' + m + ' version. Run the project package install first.'); process.exit(1); } const [major,minor,patch]=v.split('.').map(Number); if (!(major > 0 || minor > 2 || (minor === 2 && patch >= 9))) { console.error('UNSUPPORTED_VERSION: ' + m + ' ' + v + ' does not support file:// URIs. Version 0.2.9+ is required.'); process.exit(1); } console.log('OK: native PDF viewer ' + v + ' supports https:// and file://');"

If the check fails, STOP. Do not run npm install, npx expo install, pod install, or edit app.config.js. Version 0.2.9+ must already be part of the app's native build.

2a. Reconcile requested artifacts

Read and execute native-artifact-compatibility.md Steps 1–3 for the PDF viewer row before any writes or reuse. Inherit the current approval/mode from /add-native; do not repeat a valid scoped approval. Inspect src/native/pdfViewer.ts for openHttpsPdf, PdfViewerResult, requested options/actions, and the actual HTTPS/local-file behavior against installed version 0.2.9+. An HTTPS-only implementation cannot satisfy a requested local file:// preview. Check invalid URI and missing-native-module paths, not just exports; an incompatible artifact outside approval returns NEEDS_CONTEXT to the owner, or asks standalone.

3. Write or verify src/native/pdfViewer.ts

Apply Step 2a's decision for src/native/pdfViewer.ts: create when requested and missing, reuse unchanged only if compatible, or make only the approved scoped update. Preserve custom code, exports, and callers; do not overwrite from the example.

The wrapper MUST:

  • Accept https:// URLs and file:// URIs.
  • Reject content://, blob:, http://, empty, and malformed URLs before calling native code.
  • Return a discriminated union and never throw.
  • Return NATIVE_MODULE_MISSING when the extension is installed in JS but unavailable in the native build.
  • Surface viewer action results (shared, printed, dismissed) when available.
  • Return VIEWER_FAILED for native errors not covered by validation/module checks.
// src/native/pdfViewer.ts
import { NativePdfViewer } from '@microsoft/power-apps-native-pdf-viewer';

export type PdfViewerResult =
  | { ok: true; action?: 'shared' | 'printed' | 'dismissed' }
  | { ok: false; reason: 'INVALID_URL' | 'NATIVE_MODULE_MISSING' | 'VIEWER_FAILED'; message?: string };

export async function openHttpsPdf(
  url: string,
  options?: { title?: string; maxFileSizeMb?: number; cacheEnabled?: boolean },
): Promise<PdfViewerResult> {
  let parsed: URL;
  try {
    parsed = new URL(url);
  } catch {
    return { ok: false, reason: 'INVALID_URL', message: 'PDF location must be a valid https:// URL or file:// URI.' };
  }

  const isHttpsUrl = parsed.protocol === 'https:';
  const isFileUri = parsed.protocol === 'file:' && url.startsWith('file://') && parsed.pathname !== '/';
  if (!isHttpsUrl && !isFileUri) {
    return { ok: false, reason: 'INVALID_URL', message: 'Native PDF viewer supports https:// and file:// inputs only.' };
  }

  if (!NativePdfViewer?.openPdf) {
    return { ok: false, reason: 'NATIVE_MODULE_MISSING', message: 'Native PDF viewer module is not available in this build.' };
  }

  try {
    const response = await NativePdfViewer.openPdf(url, {
      maxFileSizeMb: 50,
      cacheEnabled: true,
      ...options,
    });

    if (response.status === 'ok') {
      return { ok: true, action: response.result?.action };
    }

    return { ok: false, reason: 'VIEWER_FAILED', message: response.message ?? response.error };
  } catch (error: any) {
    return { ok: false, reason: 'VIEWER_FAILED', message: error?.message ?? String(error) };
  }
}

4. Use the wrapper

Integration guidance for the owner; do not edit screens in this helper.

Screens import the wrapper, not the native package directly:

import { openHttpsPdf } from '@/native/pdfViewer';

const response = await openHttpsPdf('https://example.com/report.pdf', {
  title: "Inspection report",
});

if (response.ok) {
  switch (response.action) {
    case "shared":
      // User completed native Share.
      break;
    case "printed":
      // User completed native Print.
      break;
    case "dismissed":
      // User closed the viewer.
      break;
  }
} else {
  console.warn("Failed to open PDF:", response.reason, response.message);
}

Notes:

  • URLs must use https:// or a non-empty file:// URI. content://, blob:, and http:// are not supported by this skill.
  • Use @microsoft/power-apps-native-pdf-viewer only for this native PDF viewing use case.
  • Use expo-document-picker for picking/importing/uploading a local PDF or document.
  • Use /add-native pdf-report for generated local PDFs. That helper requires expo-print and adds sharing behavior only when expo-sharing is already present.
  • Generated local PDFs from expo-print may be opened by native PDF viewer 0.2.9+ as file:// URIs.
  • Share and Print are built into the native viewer; there are no separate JS share/print calls.
  • The wrapper returns { ok: true } | { ok: false }; handle every non-ok reason in UI.

5. Type-check

cd -- '<working_dir>' || { echo "BLOCKED: cannot enter working_dir" >&2; exit 1; }
npx --no-install tsc --noEmit

Fix only in-scope helper errors, then execute the shared compatibility contract's Step 4. Recheck requested inputs/options/actions, invalid URI rejection, missing native module, and viewer failures. Type-check success alone is insufficient; do not fix screen/generated files.

6. Native rebuild note

This skill does not install native code. If the package was just added outside the skill, the app needs a native rebuild outside this workflow. If the package was already in the build, Metro hot reload is enough for wrapper edits.

7. Do not use HostingSDK / PCF

Do not import or register:

import NativePdfViewerExtension from "@microsoft/power-apps-native-pdf-viewer";

Do not wire Companion PCF or NativePdfViewerExtension. In Power Apps native code apps, use the native React Native API above.

8. Summary

Return the shared compatibility result and actual created/updated/reused paths before this summary. Update memory-bank only after success, and leave final updates to the owner when orchestrated.

Tell the user:

PDF viewer added
Package present   : @microsoft/power-apps-native-pdf-viewer
Wrapper           : src/native/pdfViewer.ts
URL support       : HTTPS and file:// (0.2.9+)
Type-check        : PASS
Native rebuild    : not performed by this skill
Usage             : openHttpsPdf(...)
HostingSDK / PCF  : not used

Update memory-bank.md under Controls:

- PDF viewer added — @microsoft/power-apps-native-pdf-viewer (<ISO date>)

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

댓글

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

보내면 바로 공개됩니다. 이메일 주소나 전화번호 같은 개인 정보는 쓰지 마세요. URL은 2개까지입니다.

0 / 1,000자

이 양식은 reCAPTCHA로 보호되며 Google 개인정보처리방침 및 서비스 약관이 적용됩니다.

같은 저장소의 스킬

activate-site

Microsoft 공식무료

Activates and provisions a Power Pages website in a Power Platform environment via the Power Platform REST API. Use when the user wants to activate, provision, turn on, or enable a Power Pages website or portal.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

microsoft/power-platform-skills1천2026년 10월 21일 업데이트

add-ai-webapi

Microsoft 공식무료

Integrates Power Pages generative-AI summarization APIs (PREVIEW) into a Single Page Application (SPA) site — the Search Summary API and the Data Summarization API — on any record-detail or list page. Generates per-target service code (CSRF-handled) and AI site settings; delegates Web API settings, table permissions, and web roles to `/integrate-webapi` and `/create-webroles`. Use whenever a user wants AI/Copilot output that condenses Dataverse content on a Power Pages site — an AI summary, AI-generated overview or "key insights" across a record or list, a search-results summary, a case/incident summary, or recommendation-chip refinement — even when phrased as "AI-generated paragraph", "insights", or "overview". Do NOT use for: generative pages in model-driven apps (use the model-apps `genpage` skill), Copilot Studio agents/chatbots, summarizing documents or PDFs, Power BI dashboards, plain keyword search with no AI summary, or plain Dataverse CRUD (use `/integrate-webapi`).

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

microsoft/power-platform-skills1천2026년 10월 21일 업데이트

add-azuredevops

Microsoft 공식무료

Adds Azure DevOps connector to a Power Apps code app. Use when querying work items, creating bugs, managing pipelines, or making ADO API calls.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

microsoft/power-platform-skills1천2026년 10월 21일 업데이트

add-camera

Microsoft 공식무료

Internal implementation skill invoked by /add-native for camera, image picker, barcode scanner, QR scanner, and camera/gallery Dataverse artifact workflows.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

microsoft/power-platform-skills1천2026년 10월 21일 업데이트

add-cloud-flow

Microsoft 공식무료

Integrates Power Automate cloud flows into a Power Pages site. Lists available flows, suggests relevant ones based on intent, identifies scenarios and web roles, creates metadata files, and generates client-side code to call flows. Handles both new flow registration and adding already-registered flows to additional pages without re-creating metadata. Use when the user wants to add, connect, register, or link a Power Automate cloud flow to their site.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

microsoft/power-platform-skills1천2026년 10월 21일 업데이트

add-connector

Microsoft 공식무료

Use when adding a Power Platform connector to an Expo/React Native Power Apps mobile app and no dedicated mobile connector skill exists.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

microsoft/power-platform-skills1천2026년 10월 21일 업데이트

microsoft의 스킬 모두 보기

이 스킬의 문제 신고