DOCSEARCHbyAlgolia
Submit Docs

Primno Documentation

website·Indexed 31 days ago

https://primno.io

A framework for building Power Apps applications using a modular component system, dependency injection, and a comprehensive set of decorators for subscribing to Power Apps events. Includes guides on workspace configuration via primno.json, deployment to Power Apps, and API references for core types and functions like MnConfig and MnOnFormLoad.

Tokens
20.5K
Snippets
127
Records
180
Agent score
49%

What's inside Primno

  1. Overview of Primno development features

    Primno provides a modern development environment for building extensions for Model-Driven Apps (Power Apps, Dynamics 365) and Dynamics 365 CE on-premises. Key capabilities include:

    • Component-based architecture: Create reusable, plug-and-play components for forms or subgrids.
    • Dependency Injection: Use a DI container to inject services into components, facilitating easier testing via mocking.
    • Developer Mode: Real-time updates in the browser without requiring a full publish cycle.
    • Deployment: Automated building, uploading, and publishing of code within the target solution.
    • Debugging: Browser-based debugging using TypeScript source maps.
    • Language & Tooling: Full TypeScript support (transpiled to JS) and module bundling (import/export syntax) to consolidate multiple files into a single executable file.

  2. Overview of Dependency Injection in Primno

    Primno uses a dependency injection system similar to Angular, allowing developers to decouple code from its dependencies. The system consists of two main parts: Providers (registering a dependency) and Consumers (injecting a dependency into a component or service).

  3. Overview of the Primno development platform

    Primno is a TypeScript-based development platform used to customize Model-Driven Apps of Power Apps and Dynamics 365 Apps (including Online and on-premises version 9.0+). It allows developers to build scalable JavaScript code using a component-based architecture and deploy it as web resources that execute in the browser during form or grid interactions.

  4. Develop Power Apps using component-based architecture

    The architecture allows developers to create reusable components and apply them directly to tables, specifically within forms and grids.

  5. Use the SubComponent interface to manage component activation

    The SubComponent interface represents a sub-component that can be toggled between enabled and disabled states. It must be used in conjunction with the MnSubComponent decorator. It accepts a type parameter T which must extend the Component class.

  6. Handle form load events using @MnOnFormLoad

    The @MnOnFormLoad() decorator marks a method as an event handler that fires when a form is loaded. This decorator is available exclusively on Record pages.

    Important Requirements:

    • Manual Registration: This event does not register automatically. You must manually register the event within the Form Properties of the form editor.
    • Initialization: This event must be registered to successfully initialize Primno on a record page.
    @MnComponent({
   scope: {
      pageType: "record",
      table: "account"
  }
})
export class MyComponent {
   @MnOnFormLoad()
   onFormLoad() {
      Xrm.Navigation.openAlertDialog({ text: "Form loaded" });
   }
}

  7. Prepare environment and prerequisites for Primno

    To use Primno, ensure you have the following software and environment access:

    • Node.js: Version 16 or higher.
    • IDE: Visual Studio Code is recommended, though any text editor is acceptable.
    • Platform Access: A Power Apps or Dynamics 365 CE environment with a user assigned an administrator or customizer role.
    • Knowledge: Basic familiarity with TypeScript/JavaScript and the Power Apps Client API Reference is recommended.

  8. Publish local changes to Power Apps

    To move changes from your local development environment to Power Apps, first stop the developer mode process by pressing Ctrl+C in the terminal, then execute the deploy command.
    mn deploy

  9. Handle grid record selection using @MnOnGridRecordSelect

    The @MnOnGridRecordSelect decorator marks a method as an event handler for the grid record select event. This event triggers when a single row is selected in an editable grid; it does not fire during multi-row selection.

    Constraints & Requirements:

    • Page Type: Only available on 'Record' pages.
    • Registration: Requires manual registration. You must register onGridRecordSelect and provide the name of the grid control as the first additional parameter.
    • Behavior: Based on the Microsoft Client API grid-onrecordselect event.
    @MnComponent({
   scope: {
      pageType: "record",
      table: "account"
   }
})
export class MyComponent {
   // "subgrid_contacts" is the name of the grid control
   @MnOnGridRecordSelect("subgrid_contacts")
   onGridRecordSelect(eventArg: FormEventArg) {
      const telephoneAttr = eventArg.formCtx.data.entity.attributes.get("telephone1");
      const telephone = telephoneAttr.getValue();
      Xrm.Navigation.openAlertDialog({ text: `Selected telephone number: ${telephone}` });
   }
}

  10. Use the MnSubComponent decorator for component composition

    The @MnSubComponent decorator marks a class property as a sub-component. This allows a parent component to be split into smaller, reusable components through composition. To enable or disable the sub-component, the decorated property must be of type SubComponent<T>.

    The decorator takes a SubComponentConfig<T> object which specifies the component class to be used and optional input data to pass to that component.

    @MnComponent({
   scope: {
      pageType: "record",
      table: "contact"
   }
})
export class AppComponent {
   @MnSubComponent({
      component: PhoneCallComponent,
      input: {
         phone: "telephone1",
         phoneCommand: "callPhone1"
      }
   })
   phoneCall1Component: SubComponent<PhoneCallComponent>;
}

  11. Register Primno command handlers on Contact sub-grids

    To trigger Primno logic from a button on a contact sub-grid, register the mn_myproject.onCommandInvoke event handler. The following parameters must be configured for the command:

    ParameterValue
    String parameterhello
    SelectedControl(leave empty/default)
    PrimaryControl(leave empty/default)

    This can be configured using the Command Designer or Ribbon Workbench.

  12. Register events on the Power Apps command bar

    Command bar events (such as MnOnCommandInvoke or MnOnEnableRule) can be registered using the Power Apps Command Designer or Ribbon Workbench.

    Functions must be called with parameters in the following specific order:

    1. SelectedControl
    2. PrimaryControl
    3. String parameter (Value: <target name>)

    Optional arguments can be added after the String parameter and will be passed to the event handler in the extraArgs property.