stellium.consulting Open in urlscan Pro
94.46.180.35  Public Scan

Form analysis
2 forms found in the DOM

Name: Newsletter — POST

<form class="elementor-form" method="post" name="Newsletter">
  <input type="hidden" name="post_id" value="95">
  <input type="hidden" name="form_id" value="d2a8c25">
  <input type="hidden" name="referer_title" value="How to extend the Power Apps Platform - when native components are not up for the challenge | Stellium Consulting">
  <input type="hidden" name="queried_id" value="11482">
  <div class="elementor-form-fields-wrapper elementor-labels-above">
    <div class="elementor-field-type-recaptcha_v3 elementor-field-group elementor-column elementor-field-group-field_5da22b2 elementor-col-100 recaptcha_v3-bottomleft">
      <div class="elementor-field" id="form-field-field_5da22b2">
        <div class="elementor-g-recaptcha" data-sitekey="6Ldl-CohAAAAAPd1CPM3Mve0o6YusaKyu6sIqfCZ" data-type="v3" data-action="Form" data-badge="bottomleft" data-size="invisible"></div>
      </div>
    </div>
    <div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-name elementor-col-33">
      <input size="1" type="text" name="form_fields[name]" id="form-field-name" class="elementor-field elementor-size-sm  elementor-field-textual" placeholder="Name">
    </div>
    <div class="elementor-field-type-email elementor-field-group elementor-column elementor-field-group-email elementor-col-33 elementor-field-required">
      <input size="1" type="email" name="form_fields[email]" id="form-field-email" class="elementor-field elementor-size-sm  elementor-field-textual" placeholder="Email" required="required" aria-required="true">
    </div>
    <div class="elementor-field-group elementor-column elementor-field-type-submit elementor-col-33 e-form__buttons">
      <button type="submit" class="elementor-button elementor-size-sm">
        <span>
          <span class=" elementor-button-icon">
          </span>
          <span class="elementor-button-text">Stay in the loop</span>
        </span>
      </button>
    </div>
  </div>
</form>

Name: Lets Talk Message — POST

<form class="elementor-form" method="post" data-wpl_tracker="{&quot;gtag&quot;:true,&quot;gtag_category&quot;:&quot;Lets Talk Message&quot;,&quot;gtag_action&quot;:&quot;click&quot;,&quot;gtag_label&quot;:&quot;Send Lets Talk Message&quot;}"
  name="Lets Talk Message">
  <input type="hidden" name="post_id" value="6657">
  <input type="hidden" name="form_id" value="b3cd149">
  <input type="hidden" name="referer_title" value="How to extend the Power Apps Platform - when native components are not up for the challenge | Stellium Consulting">
  <input type="hidden" name="queried_id" value="11482">
  <div class="elementor-form-fields-wrapper elementor-labels-">
    <div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-name elementor-col-50">
      <label for="form-field-name" class="elementor-field-label elementor-screen-only"> Name </label>
      <input size="1" type="text" name="form_fields[name]" id="form-field-name" class="elementor-field elementor-size-sm  elementor-field-textual" placeholder="Name">
    </div>
    <div class="elementor-field-type-email elementor-field-group elementor-column elementor-field-group-email elementor-col-50 elementor-field-required">
      <label for="form-field-email" class="elementor-field-label elementor-screen-only"> Email </label>
      <input size="1" type="email" name="form_fields[email]" id="form-field-email" class="elementor-field elementor-size-sm  elementor-field-textual" placeholder="Email" required="required" aria-required="true">
    </div>
    <div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-company elementor-col-50">
      <label for="form-field-company" class="elementor-field-label elementor-screen-only"> Your Company </label>
      <input size="1" type="text" name="form_fields[company]" id="form-field-company" class="elementor-field elementor-size-sm  elementor-field-textual" placeholder="Your Company">
    </div>
    <div class="elementor-field-type-text elementor-field-group elementor-column elementor-field-group-where elementor-col-50">
      <label for="form-field-where" class="elementor-field-label elementor-screen-only"> Where You Based </label>
      <input size="1" type="text" name="form_fields[where]" id="form-field-where" class="elementor-field elementor-size-sm  elementor-field-textual" placeholder="Where You Based">
    </div>
    <div class="elementor-field-type-textarea elementor-field-group elementor-column elementor-field-group-message elementor-col-100">
      <label for="form-field-message" class="elementor-field-label elementor-screen-only"> Message </label>
      <textarea class="elementor-field-textual elementor-field  elementor-size-sm" name="form_fields[message]" id="form-field-message" rows="4" placeholder="Message"></textarea>
    </div>
    <div class="elementor-field-type-recaptcha_v3 elementor-field-group elementor-column elementor-field-group-recaptcha elementor-col-100 recaptcha_v3-inline">
      <div class="elementor-field" id="form-field-recaptcha">
        <div class="elementor-g-recaptcha" data-sitekey="6Ldl-CohAAAAAPd1CPM3Mve0o6YusaKyu6sIqfCZ" data-type="v3" data-action="Form" data-badge="inline" data-size="invisible"></div>
      </div>
    </div>
    <div class="elementor-field-group elementor-column elementor-field-type-submit elementor-col-100 e-form__buttons">
      <button type="submit" class="elementor-button elementor-size-sm">
        <span>
          <span class=" elementor-button-icon">
          </span>
          <span class="elementor-button-text">Send</span>
        </span>
      </button>
    </div>
  </div>
</form>

Text Content

Skip to content
 * Home
 * Services
   * Modern Workplace
   * Business Apps
     * Power Platform
   * Cloud Platform
     * Cloud Platform Governance
 * Partners
 * Case Studies
 * Resources
   * Power Platform Governance
   * Power Platform Security & Automation
 * Careers

Menu
 * Home
 * Services
   * Modern Workplace
   * Business Apps
     * Power Platform
   * Cloud Platform
     * Cloud Platform Governance
 * Partners
 * Case Studies
 * Resources
   * Power Platform Governance
   * Power Platform Security & Automation
 * Careers

Let's Talk
 * Home
 * Services
   * Modern Workplace
   * Business Apps
     * Power Platform
   * Cloud Platform
     * Cloud Platform Governance
 * Partners
 * Case Studies
 * Resources
   * Power Platform Governance
   * Power Platform Security & Automation
 * Careers

Menu
 * Home
 * Services
   * Modern Workplace
   * Business Apps
     * Power Platform
   * Cloud Platform
     * Cloud Platform Governance
 * Partners
 * Case Studies
 * Resources
   * Power Platform Governance
   * Power Platform Security & Automation
 * Careers

Let's Talk
 * Home
 * Services
   * Modern Workplace
   * Business Apps
     * Power Platform
   * Cloud Platform
     * Cloud Platform Governance
 * Partners
 * Case Studies
 * Resources
   * Power Platform Governance
   * Power Platform Security & Automation
 * Careers

Menu
 * Home
 * Services
   * Modern Workplace
   * Business Apps
     * Power Platform
   * Cloud Platform
     * Cloud Platform Governance
 * Partners
 * Case Studies
 * Resources
   * Power Platform Governance
   * Power Platform Security & Automation
 * Careers

Let's Talk




HOW TO EXTEND THE POWER APPS PLATFORM – WHEN NATIVE COMPONENTS ARE NOT UP FOR
THE CHALLENGE



If you are wondering how to take your IT to the next level or discussing
business improvements, it’s barely impossible not to talk about the Power Apps
Platform these days. It’s the best way to do more with less being a powerful set
of tools that allows app makers to create low code solutions for their business
needs. 

However, as powerful as it is, their native components may not be the solution
for more complex challenges. In that case there are two ways to extend the Power
Platform solutions: PCF and custom connectors. PCF allows developers and app
makers to create code components that can be integrated into Power Apps, while
custom connectors enable the use of existing APIs to easily use your systems
data. Let’s dig into this. 





 

THE POWER APPS PLATFORM  

Power Apps Platform includes a set of low code apps that empower users (app
makers) to create solutions for improving their business’ needs. It has a native
component that allows citizens to make remarkable things without any
customization.  

When it is not possible to meet requirements with native components, one can
move on to custom components to achieve the specific proposal of the project
using Power Apps Component Framework (PCF) or custom connector. 

 

POWER APPS COMPONENT FRAMEWORK (PCF)

PCF empowers developers and app makers to build code components when
out-of-the-box controls don’t fit the app maker’s needs, helping to create
reusable components that can be integrated in Power Apps.

In the following example, we will explain the code component that displays a
paged, scrollable dataset grid that supplies sortable and filterable columns. It
also allows highlighting of specific rows by configuring an indicator column.  

Once the PCF was chosen to build the code component, we used the forementioned
technologies:

 * TypeScript, node, react, html, and css.
 * Microsoft Fluent UI React libraries
 * PCF CLI, commands to perform operation in PCF projects
 * Windows terminal

 

But first, the following prerequisites needed to be installed:

 1. Visual Studio Code (VSCode)
 2. node.js (LTS version is recommended)
 3. Microsoft Power Platform CLI (Use either the Visual Studio Code extension or
    the MSI installer)
 4. .NET Build tools.

 

The next step was to create the new component project with the following
command:

> pac pcf init –namespace mycomponentname –name ComponentGrid –template dataset

 

This adds a new component project and related files to the current folder,
including the packages.json that defines the modules needed.

 

The required modules were installed using the command:  

> npm install

The code component includes an index.ts file with essential functions (e.g.
Init, updateView and destroy) that control the lifecycle of the code component.
(According to MST documentation)

After that, the Microsoft Fluent UI and React was used for UI creation, so the
following dependencies were installed at the terminal:  

> npm install react react-dom @fluentui/react

 

Subsequently, the ComponentGrid\ControlManifest.Input.xml file is created that
describes the meta data for the behavior of the code component as dataset, input
and output properties.

 

Finally, the component logic implementation using TypeScript and Fluent UI React
component was implemented inside the index.ts file on the Visual Studio Code
with the essential functions predefined.

 

In the final step the solution was deployed and configured on the Power Platform
environment with the packaging command:  

> pac solution init –publisher-name Samples –publisher-prefix componentGrid

 

Once the new solution project is created, the refer to the location where the
component was created is need, by using the following command:  

> pac solution add-reference –path ..\
> 
>  

After the zip file from the solution project is generated, and when inside the
solution project directory, using the following command:  

> msbuild /t:restore

 

Again, run the following command:  

> msbuild

 

The generated solution zip file is in the Solution\bin\debug folder to be
imported in the solution into Power Platform environment.



 

This is a common request from users/app makers and can be complex to implement
using native canvas app components.









 

CUSTOM CONNECTORS IN POWERAPPS CANVAS APP

PCF is great to extend the Microsoft Power Platform, but also as a custom
connector to use existing APIs easily.

When building the custom connector, the following components were used:

 * The Azure function that implements the API was created
 * A custom connector was created in the solution
 * The security and actions were configured on the custom connector
 * The Power Apps canvas app was configured to use the connector

 

In this example, an Azure function app and the function to return calculated
values were used.

In the first step, the Custom Connector was created on the Power Apps maker
portal > Automation > Custom Connector.



 

Next, the Host column was filled with the Function URL from the API

Then, the API key for security was selected and the connector was saved



 

After that, the action was created by filling in the required fields, importing
the sample to the verb and adding a Default Response.

Finally, the Custom Connector was used in a Power Apps canvas app and in a Power
Automate as shown on the picture below.



 

The action to call the connector was added on the OnSelect button action as
shown on the image below:



 

The custom connector was added on the Power Automate as well, to return the
results from the API implemented:



 

CONCLUSION

While custom development may be necessary at times, it is important to keep in
mind that it adds complexity and more costs to the project, such as premium
licensing and maintenance needs. Therefore, it is always better to use the
out-of-the-box features whenever possible to minimize complexity and costs.  

If you are looking to extend Power Apps Platform solutions with complex UI
requirements or custom data integration, it is important to work with experts
who have experience in implementing these types of solutions.  

At Stellium, we understand that the success of any implementation project lies
in careful planning and execution, and we can help improve solutions with best
practices in mind, so that you can optimize your business processes and
workflows while minimizing maintenance costs and complexity. 

Our team of experts can work with you to identify your specific business needs
and recommend the most effective solutions to meet them. Being experts in  Power
Platform governance, we recommend and follow the best standards when it comes to
data integration, custom components, and release management. This certifies your
organization uses the right policies defined to implement corporate solutions at
scale with control on cost, security, and operations. 

In conclusion, if you are looking to build advanced solutions with Power Apps,
it is important to work with a team of experts who provide you the ability and
support to ensure that your solutions are effective, efficient, and optimized
for your specific business needs. Click here to know more.


 * April 18, 2023

 * Natacha Ribeiro

 * business apps, custom made software, microsoft, power apps, power automate,
   power platform

SUBSCRIBE TO OUR INTERSTELLAR DIGEST NEWSLETTER

Stay in the loop

SERVICES

 * Modern Workplace
 * Business Apps
 * Cloud Platform

LINKS

 * Case Studies
 * Blog
 * Podcast

OTHERS

 * About Us
 * Partners
 * Careers
 * Contact

STELLIUM HEADQUARTER

 * Av. Reverdil 2
 * 1260 Nyon. Switzerland
 * +41 (0)22 361 76 04
 * contact@stellium.consulting

STELLIUM PORTUGAL

 * Campo Grande, 28 10.B
 * 1700-093 Lisboa. Portugal
 * (+351) 211 311 962

FOLLOW US

Linkedin Instagram Facebook-f

© 2023 Stellium SA. All Rights Reserved. Privacy Policy

Our Terms & Conditions


WHAT'S YOUR CHALLENGE?

We’re not great fans of templates for proposals as our experience taught us that
there is no such thing as two clients with exactly the same needs that can be
addressed equally.

We want to understand how we can help your business to grow and present you with
a customized solution.

Challenge us to do so by getting in touch below.

Name
Email
Your Company
Where You Based
Message

Send