DEV Community: Prince Adimado

7 Reasons, Why You Should Learn the Power Platform.

Prince Adimado — Mon, 27 May 2024 15:58:36 +0000

Introduction

I found a publication that stated that the Power Platform is now a $2 billion business with over 7 million monthly active users (MAUs). It also went further to state that 97 percent of the Fortune 500 use the Power Platform and even 92 percent of the Fortune 500 uses Power Apps in at least one department.

What am I driving at? This shows that learning the Power Platform is a great tool in your arsenal of skills. During the Global Power Platform Bootcamp 2023 in Accra, I had the privilege of hearing Samuel Adranyi, a Microsoft MVP, deliver an inspiring demo. He emphasized that when it comes to the usage of the Microsoft Power Platform, our imagination is the only limit to what we can achieve.

Check out my blog post on how I integrated Power Automate and React.

If that didn't even blow your mind even further, it’s said that there are going to be 500 million apps to be built in the next five years. We should not pretend that there are enough code-first developers to do this.

Low code/no-code tools like the Microsoft Power Platform is a game changer that offers many services from data analytics and visualization, and automation, to app development, chatbot development, and recently website development which leverages the organization’s data.

How much more can I say? Than to give you 7 reasons why you should learn the Microsoft Power Platform.

7 Reasons, Why You Should Learn the Power Platform.

1️⃣ Rapid Application Development

The Power Platform offers a low-code/no-code environment, allowing you to quickly build applications without extensive programming knowledge. Imagine trying to build a flow that sends an email when a new response is submitted and the data must be stored in either an Excel workbook or a SharePoint list.

Wouldn’t it be very productive if there were existing connectors available like what we have in Power Automate rather than going full Ninja 🥷 mode to write all code for the APIs and integrations just to make this happen?

Again, imagine a scenario where your organization receives hundreds of customer inquiries through various channels every day. Manually sorting through inquiries, assigning them to the appropriate team members, and responding individually can be time-consuming and prone to human error.

However, with the Power platform’s Power Automate, you can create a workflow that automatically captures and categorizes incoming inquiries, assigns relevant teams based on predefined rules, and even generates email responses.

This automation not only makes the organization productive but also ensures faster response times improved customer satisfaction and increased operational efficiency.

2️⃣ Customizable Solutions

With the Microsoft Power Platform, you can tailor applications to specific business needs. It’s so flexible that it enables you to create custom solutions that fit your organization’s unique requirements.

3️⃣ Data Visualization

Looking for ways to analyze and visualize your data. Look no further, Power BI, a tool of the Power Platform, offers robust data visualization and analytics capabilities. You can create interactive dashboards and reports to gain valuable insights from your data, empowering data-driven decision-making.

4️⃣ Extensive Connector Library

The second point showed how customizable the Power Platform is. Let’s talk about the extensibility of the Power Platform.

Power Platform won’t be where it is today if it can’t be extended to include 3^rd party services. Do you know that you can create custom connectors to connect to your own API or third-party APIs?

You can create customer actions that can be used in your workflows. And don’t worry if your data source is on an on-premises database. You can still create custom connectors for on-premise data sources. Learn more.

In Power Apps, you can create custom controls that can be used in your apps. Learn more about how to create custom controls using the Power Apps Component Framework.

In data analytics and visualization, Power BI developers can extend Power BI’s capability to create custom data extensions.

Power Virtual Agents can also be extended in several ways. Bots can be configured to suit the individual needs of an organization and to provide further extensibility with other services and features. This includes the use of Microsoft Bot Framework skills to augment the bot’s capabilities, integration with Microsoft Teams, Facebook, Telegram, and other channels, and more.

The list can go on and on about how the Power Platform has evolved into what we have today.

5️⃣ Integration Capabilities

The Power Platform seamlessly integrates with other Microsoft products and services, such as Microsoft 365, Dynamics 365, and Azure.

This integration allows you to leverage existing data and systems, enhancing overall efficiency and productivity.

Power Platform Integrates with Microsoft 365 to provide you with the tools you need to build custom apps, automate workflows, and analyze data.

You can use Power Automate to create workflows that connect to Microsoft 365 services like Outlook, Excel, and SharePoint. You can also use Power Apps to build custom apps that integrate with Microsoft 365 services like Teams and Dynamics 365.

Moreover, you can use Power BI to analyze data from Microsoft 365 services like Excel and SharePoint.

6️⃣ Learning and Career Opportunities

Acquiring skills in the Power Platform can open various career opportunities. The demand for professionals proficient in this awesome tool called the Power Platform is on the rise and organizations are seeking individuals who can leverage its capabilities to drive digital transformation.

7️⃣ Community and Support

Power Platform has a vibrant and supportive community of users, developers, and experts. There are Microsoft MVPs I cited in one of my articles on tips to master the Power Platform. Power Platform has a huge community of users, find out more here.

Engaging with the community provides opportunities for learning, collaboration, and knowledge sharing, ensuring you.

You can also find user groups on the Power Users page I provided at this point. User groups organize community-led events which bring together can continually enhance your skills and stay up to date with the latest developments tech enthusiasts, students, and developers under one roof to learn and network.

🙏 Let's Conclude

Thank you for reading this far. I have shared 7 solid reasons why you should learn the Microsoft Power Platform. From how applications, no matter how small or big, can be built rapidly through the Power Platform. Applications built with the Power Platform are highly customizable to suit the organizational brand.

Writing complex lines of code to visualize your data shouldn't be a limitation to you when you have the data Visualization tool, Power BI which is the leading industry tool in data visualization.

If you haven’t read my article on tips to learn the Power Platform, check it out here.

Support me by, BUYING ME A COFFEE. 🙏

Mastering the Power Platform: Essential Tips to Level Up Your Skills

Prince Adimado — Mon, 27 May 2024 15:45:09 +0000

Introduction

Maybe you click to open this article to find out how you can learn Power Platform to skill up or you wanted to have a good read just to find out what the article contains. No matter the reason; time they say it’s money, give me a few minutes of your valuable time to share my truth.

The Microsoft Power Platform has evolved over the years with the initial release of Power BI in 2011 which serves as a powerful tool for data visualization and business intelligence capabilities for users. Microsoft went further to release Power Apps a low-code application development in 2016 together with Power Automate which was initially called Flow for creating workflows to streamline business processes.

Microsoft thought it wise to integrate and expand these tools. In 2017, Microsoft Integrated Power BI, Power Apps, and Power Automate under a unified umbrella known as the Microsoft Power Platform.

What if businesses can build and deploy chatbots without writing complex lines of code or even if code should be written it should be low code? Microsoft introduced Power Virtual Agents (PVA) in 2019 to come and demystify chatbot development.

Until recently, the new kid on the block, Power Pages, which provides rich, customizable templates, a fluid user experience through the design studio, and an integrated learning hub to quickly build sites for your unique needs.

Through these years low-code languages like Power Fx were introduced to provide developers superpowers to build applications in Excel-like syntax.

🤝 Getting Started

It was estimated that 500 million apps will be created in the next in next five years.

There simply aren’t enough professional pro code developers to go around the volume of work ahead to modernize businesses. But the good news is that low-code platforms like the Power Platform are here to empower more people regardless of their coding ability to create apps.

As a Power Platform developer, myself, I have devised 4 tips to help us to continue to skill up and stay updated in the tool we have purposed in our hearts to learn.

Here are the four powerful tips to help you learn the Microsoft Power Platform.

Four Tips to Help You Learn the Microsoft Power Platform

💡 Documentation

We have heard the phrase “Read the docs”. How these three words could save us from a lot of frustration and waste of precious pearls of time. I remember the first workflow I built in Power Automate during a Microsoft Student Ambassador event by then-a Gold Student Ambassador, Shadrack Inusah who gave a demo. I re-watched the recording repeatedly just to fully build and run my first flow.

I was a novice who had heard of how amazing the Microsoft Power Platform is. The fact is I didn’t read the documentation of Power Automate and it went on for months, always trying to build workflows but the thought of looking up the docs didn’t come up my mind.

I remember, pausing learning the Power Platform because I didn’t know how to use certain connectors. So, I paused, until the 4^th quarter of 2022 when I started to explore Power Automate again.

But this time, I started reading the Power Automate documentation, and I realized Microsoft has all the connectors documented. So, I started to explore and learn to build workflows.

How can one learn a tool without reading the documentation of its usage?

Documentation refers to the written information, instructions, and explanations that accompany a software, product, service, or process.

It provides comprehensive details about how to use, configure, troubleshoot, and maintain a particular item or system.

Documentation serves as a valuable resource for users, developers, administrators, and other stakeholders involved in the use or implementation of a product or service.

To us developers, Documentation provides developers with insights into the purpose, features, and functionality of a software, library, or API. It helps us gain a comprehensive understanding of how to effectively use the tool or framework.

To conclude on this point, I say just Read the Docs. It can’t be overemphasized.

Links to the various Documentation of the Power Platform

🔸Power Platform Documentation

🔸Power Automate Documentation

🔸Power Apps Documentation

🔸Power BI Documentation

🔸Power Virtual Agents Documentation

🔸Power Pages Documentation

💡Community

Each one of us comes from a community. A community is a group of individuals who share common interests, goals, or characteristics and come together to interact, support, and collaborate with one another.

To developers, the community holds significant importance and offers several benefits. Here are what community means to developers:

Learning and Knowledge Sharing: community provides an environment for developers to learn from one another, exchange ideas, and share knowledge. It also offers opportunities to expand technical skills, stay updated with the latest industry trends, and explore new technologies. Developers can ask questions, and seek guidance from experienced members of the community.
Career Growth and Opportunities: Engaging in a developer community can present career growth opportunities, such as attending conferences, participating in hackathons, or coding challenges.

When you check the documentation pages of the various Power Platform tools, you will see “Community” on the navigation bar. Microsoft Power Platform has community forums for all the tools. Do you have a question you want to ask, a bug that has been troubling you for days or even weeks? Check the Power Platform community, it could be that your issue has been fixed.

Apart from the Community forums, there are Microsoft Power Platform User groups depending on where you find yourself. Do you even know that all the Microsoft User Groups can be found on the community page of the Power Platform website? Learn more.

💡Resources from Microsoft Cloud Advocates and MVPs

Microsoft MVPs are part of the driving force to help Microsoft to continue fulfill its mission which is “to empower every individual and organization on the planet to achieve more”.

It cannot be overstressed; Microsoft MVPs are doing the most to promote the Microsoft Technologies their MVPs for.

Microsoft MVPs (Most Valuable Professionals) are individuals who are recognized by Microsoft for their exceptional contributions to the technical community.

MVPs demonstrate expertise, community engagement, and willingness to share knowledge and experience with others.

Microsoft has tons of technologies you may not even know, but there are MVPs for all technology categories in Microsoft.

These professionals have YouTube Channels, and blog websites, some even go to the extent to produce tutorials to sell on either their own platforms or paid platforms like Udemy.

They contribute to the body of knowledge and without them, you may even guess the disadvantage.

Overall, Microsoft MVPs are highly respected and influential community leaders who make significant contributions to the technical community by sharing their expertise, promoting Microsoft technologies, and fostering collaboration and knowledge-sharing among developers, IT professionals, and other technology enthusiasts.

On the other side, we have Microsoft employees. Microsoft Cloud advocates are technical evangelists who work closely with developers, IT professionals, and even students and the broader technical community to drive the adoption and provide guidance on Microsoft’s cloud technologies.

Cloud Advocates are passionate about empowering individuals and organizations to leverage the full potential of Microsoft Azure, Power Platform, and other cloud services.

If you’re truly within the Microsoft ecosystem, you may have seen some on LinkedIn and Twitter

I can’t end this point without mentioning Microsoft Learn Student Ambassadors. At this moment you’re reading a blog post written by a Gold Student Ambassador. We also help promote Microsoft Technologies on our various campuses across the globe. We are on-campus student ambassadors helping our peers to leverage the opportunities Microsoft has to offer to students.

💡
I have an event coming up on July 22, 2023, on the Power Platform. This webinar will help you get started or even if you’re into it already, a Power Platform specialist will be my guest speaker to tell us the skills needed to secure a job as a Power Platform developer. Learn more.

📚 Resources by Microsoft Cloud Advocates

🔸 April Dunnam

🔸 Reza Dorrani

🔸 TheOyinbooke

📚 Resources by Microsoft MVPs

🔸 Samuel Adranyi

🔸 Shadrack Inusah

🔸 Shane Young

🔸 Thomas Festus (FestMan Learning Hub)

🔸 Lisa Crosbie

🔸 kristine Kolodziejski

🔸 DamoBird365

🔸 Rachel Irabor

💡 Build Projects and Document

From time to time, we are told by Microsoft Cloud Advocates, MVPs, and even student ambassadors to learn in public. You don’t know it all, don’t hide what you’re learning. For this one, we will continue to over-emphasize it. 😂

Some people secured job offers by learning and sharing in public. They utilize LinkedIn and Twitter to share their learning.

We are encouraged to document our journey into Tech, and this is one of the ways to achieve that.

Whenever you build a project no matter how small it is, document it. As you continue to do this you will have good memories to fall back on later in the future.

I can’t make this point lengthy, so I will cut it short.

🙏 Let's Conclude

Microsoft Power Platform will continue to evolve and even expand to include more services. You may not know how well-integrated the Microsoft Power Platform is unless you follow the first tip. Which is to read the docs.

Documentation will save you a lot more time and effort which otherwise would have been wasted in over-brainstorming and saying to yourself “why”.

Create an account on the community page of Power Platform there are tons of information over there. How much more can we say about Microsoft MVPs, Cloud Advocates, and Microsoft Learn Student Ambassadors who help in the adoption of Microsoft Technologies?

If you’re a student engage with the Student Ambassadors communities on your campus and if there is none. Why don’t you become a Microsoft Learn Student Ambassador?

Continue to learn and build your skills in the Power Platform by utilizing the resources and tips to help you skill up.

If you have been able to make it this far, thank you.

Support me by, BUYING ME A COFFEE. 🙏

Power Automate and React Integration: Automate Business Processes

Prince Adimado — Mon, 27 May 2024 15:37:42 +0000

Introduction

Are you curious about the rising trend of citizen developers and their collaboration with professional developers to streamline business processes? Discover how the Microsoft Power Platform empowers both developers to work hand in hand as we walk you through building a registration form with React, integrating it with Power Automate, and leveraging Excel as a data storage solution.

Imagine an organization instructing its software engineers to build a registration landing page for an event, the data must be stored in an Excel file. Also, imagine in that same organization there is a low-code developer. How can these two developers work together on this project?

This is where the citizen developer and the pro developer can work together to execute this project.

I first saw a demo of a web app like this in ASP.NET Core during the Global Power Platform Bootcamp 2023, in Accra, Ghana by Frank Odoom a Microsoft MVP. So, I decided to replicate it in a JavaScript library I'm familiar with.

In this article, I will walk you through how to build a registration form with React that sends data through an API to Power Automate and then saves the data in an Excel file. We won't just save the form data in Excel but also send out an email to the user, this is to make sure that the email address is valid else it won't be saved in file Excel which is acting as our data storage.

Getting Started

To start building this project, we first need our API. How can we get the API to use in our source code in React? Let me first list the steps I went through to fully build this project.

Set up the Power Automate workflow to handle API data.
Test the API using Postman to ensure successful data transmission.
Create a React app and build the registration form.
Utilize Axios for making HTTP requests from the React app.
Implement React Hook Form for form validation and handling.
Use React Router for seamless navigation, including a success page.
Create the Success page.
Deploy the React app to make it accessible online.

Build the Power Automate Workflow

If you are new to Power Automate, you will need a Microsoft 365 license to be able to use the Power Platform. Create your Microsoft 365 developer tenant here. If you're unsure how to get started you can see this post with more details on how to set up Microsoft 365 Developer Account.

Step 1:

To start with, we first need to know which type of Power Automate flow to use. Understanding the flow type will help you know the trigger connector to use. For this flow, we shall use the Instant cloud flow.

From the figure below, give your flow a name, then select the connector “When an HTTP request is received”. Proceed to create your flow, by selecting the Create button.

Step 2:

After selecting the create button, you will be directed to your flow. You will see the trigger connector when you first create it. In the connector, you will need to generate the JSON payload.

A JSON payload refers to the data that is sent or received in JSON format as part of a request or response in a web application or API. Power Automate has made it very simple for us to just write a sample payload and then use the feature in the connector to generate schema.

Click on the “Use sample payload to generate schema”.

After writing your sample payload, click on "Done" to generate the schema.

Click to show the advanced options, in the method dropdown menu, choose POST as the HTTP verb. We are going to make a POST request.

Step 3:

Search for the connector, “Parse JSON” and select it.

Select the on the Content input, to add “Body” as the dynamic content.

At the schema input, just copy the JSON payload generated in the trigger connector.

You should have something like this.

Step 4:

Select the “Compose” connect and parse the JSON variables generated in the “Parse JSON” connector above, as dynamic content in the “Compose” connector.

You should have something like this.

Step 5:

In this step, we have to initialize the data received to a variable. So search for “Variable” and Select it to show the connectors. Choose the “Initialize Variable” connector.

Give the variables a name and initialize, select “String” as the data type for both variables “full_name" and "email_address”. Remember that in the JSON payload schema, the data types are both strings.

Step 6:

In this step, we proceed to craft our email message. Search for Outlook and choose the “Send an email (V2)” connector. We will use this connector to send an email once the form is submitted.

Craft your email message, this is how I wrote mine.

Step 7:

We shall use Excel for data storage when the form is submitted. You first go to your OneDrive and create an Excel online file. It will be ideal to create a folder where you can be able to reference this easily. As I did for Outlook in the previous step, search for Excel and choose “Excel Online (Business)”. From the list of Excel connectors, choose the “Add a row into the table” connector.

Test the API using Postman to ensure successful data transmission.

Now we are done building our flow, the next step is to test whether our flow works. We don’t need to finish building the UI with React to be able to test our flow.

Create a Postman account if you don’t have one. We will use Postman to make a POST request to the HTTP POST URL or the API.

To get the API URL, go to the trigger connector to copy the URL.

Note: you will need to save your flow for the HTTP POST URL to be generated.

Follow this guide to test your flow.

Create a React app and build the registration form.

This is where we build the UI of the registration form using React.

To follow along, I used Tailwind CSS as the framework for styling, and also we will use Vite as our development server and a build tool that focuses on fast development experiences.

To create a Vite project, run this command:

npm create vite@latest my-project -- --template react
cd my-project

Install Tailwind CSS, run these commands

$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init -p

Finally, run this command:

npm install

Follow this guide on the Tailwind CSS website to finish the setup-up of your project.

Now, let’s proceed to build the form. Since this is a guide, I won’t be giving details on how I style the form. But I will show I applied React Hook Form, Axios, and React Router to achieve the functionality of the web app.

import { useEffect } from 'react'
import { useForm } from "react-hook-form";

export default function App() {


return (
    <div className="App font-serif bg-gray-300 min-h-screen">
      <div className="flex justify-center items-center py-[5rem] sm-425:py-0 ">
        <div className="max-w-[30rem]  ">
          <div className="flex flex-col bg-[#fff] w-full rounded-md px-5 py-12 sm-425:pt-16 sm-425:min-h-screen sm-375:min-h-screen sm-375:pt-16 sm-320:min-h-screen sm-320:pt-12">
            <div className="description mb-5">
              <div>
                <img
                  src={badge}
                  alt="mlsa logo"
                  className="w-20 h-20 mx-auto"
                />
              </div>
              <h1 className="text-black text-2xl font-semibold text-center py-3 sm-320:text-center sm-425:text-center sm-375:text-center">MLSA Ghana Days 2023 </h1>
              <p className="font-medium text-sm text-justify ">MLSA Ghana Days is a 3-day event that brings together students, 
                developers, and tech enthusiasts to learn, network, and share ideas on the latest
                 technologies from Microsoft.
              </p>
              <h2 className="mt-3 text-lg font-semibold">Register here</h2>
            </div>

            <div className="">
              <form action="#" onSubmit={handleSubmit(onSubmit)}>
                <div className="form__group flex flex-col mb-5">
                  <label htmlFor="name">Full Name</label>
                  {watchAllFields && <input 
                    type="text" 
                    id="name" 
                    placeholder="Enter your full name"
                    className="border-2 outline-none border-gray-400 focus:ring-1 focus:ring-amber-500 rounded-md p-2"
                    {...register("full_name", { required: true, maxLength: 70 })}
                    aria-invalid={errors.full_name ? "true" : "false"}
                  />}
                  { errors.full_name?.type === "required" && ( <span role='alert' className="text-red-500 text-sm">This field is required</span> )}

                </div>
                <div className="form__group flex flex-col mb-5">
                  <label htmlFor="email">Email Address</label>
                  { watchAllFields && <input 
                    type="email" 
                    id="email" 
                    placeholder="Enter your address" 
                    className="border-2 outline-none border-gray-400 focus:ring-1 focus:ring-amber-500 rounded-md p-2"
                    {...register("email", { required: true, pattern: /^\S+@\S+$/ })}
                    aria-invalid={errors.email ? "true" : "false"}
                  /> }
                  { errors.email?.type === "required" && ( <span role='alert' className="text-red-500 text-sm">This field is required</span> )}
                </div>
                <div className="form__group ">
                  <input 
                    type="submit" 
                    value="Submit"
                    className="bg-amber-500 w-full text-white font-semibold py-2 px-4 rounded-md cursor-pointer hover:bg-amber-600 active:bg-amber-700 focus:outline-none focus:ring-1 focus:ring-amber-500"
                  />
                </div>
              </form>
            </div>

          </div>

        </div>
      </div>
    </div>
  )   
}

In the above code represents a React Component that renders a registration form for an event called MLSA Ghana Days 2023. The form includes 2 fields, and these fields are the same as the JSON payload in the Power Automate flow. The form includes fields for the user’s full name and email address, along with a submit button. It utilizes React Hook form for form validation and handling. When the form is submitted, the onSubmit function is called. Finally, the form is styled by Tailwind CSS classes and made responsive.

Utilize Axios for making HTTP requests from the React app.

import { useEffect } from 'react'
import { useForm } from "react-hook-form";
import axios from 'axios';
import { useNavigate } from 'react-router-dom';




export default function App() {

  const { register, handleSubmit, watch, getValues, reset, formState: { errors } } = useForm();

  const watchAllFields = watch();

  const navigate = useNavigate();

  const onSubmit = async () => {

      try {
        const formdata = getValues()
        const {full_name, email} = formdata;

        const response = await axios.post("/api",
         {
          "full_name": full_name,
          "email": email
         });

         console.log('Response:', response)
         reset();

         // Redirect to Success message
         navigate('/success')
      } catch (error) {
        console.log('Error:', error)
      }
  }

  useEffect(() => {
   const subscription =  watch((value, {name, type}) => console.log(value, name, type));
    return () => subscription.unsubscribe();
  }, [watch]);

return (
// JSX code for the form below

)
}

The provided code snippet showcases the functionality of a registration form implemented in a React application. Here's an overview of its functionality:

The useForm hook from the React Hook Form library is utilized to handle form registration, submission, and validation. It provides methods like register, handleSubmit, and watch, as well as access to form state and validation errors.
The watch function is used to monitor changes in form fields and store the values in the watchAllFields variable.
The useNavigate hook from React Router is used to enable programmatic navigation. It allows for redirection to a success page after form submission.
The onSubmit function is called when the form is submitted. It retrieves the form data using getValues a component from React Hook Form and makes a POST request to the /api endpoint, sending the full_name and email values in the request body.

Note: The /api is the HTTP POST URL you copied in Power Automate to test the flow. Copy the API URL and paste it, to allow Axios to make the request.

If the request is successful, the reset function is called to clear the form fields, and the user is redirected to the success page using the navigate function.
If there is an error during the submission process, the error is logged to the console.
The useEffect hook is used to subscribe to changes in form field values using watch. Whenever a change occurs, a callback function is triggered to log the updated value, field name, and field type. The subscription is unsubscribed when the component is unmounted.

In your main.jsx, create a route using CreateBrowserRouter. This will handle the navigation between the two pages.

import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import Success from "./component/Success.jsx"
import {
  createBrowserRouter,
  RouterProvider,
} from "react-router-dom";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
  },

  {
    path: "/success",
    element: <Success />,
  }

])

ReactDOM.createRoot(document.getElementById('root')).render(
  <RouterProvider router={router} />
)

Well, we are almost done. Let’s proceed to create the success page, this page as mentioned above, after form submission useNavigate will route from the home page to this success page.


import check from "../assets/check.png";

export default function Success() {

    return (
        <div className="success font-serif bg-gray-300 min-h-screen">
            <div className="flex justify-center items-center py-[10rem] sm-425:py-0 sm-375:py-0 sm-320:py-0">
                <div className="max-w-[30rem] bg-white rounded-xl shadow-2xl sm-425:min-h-screen sm-425:rounded-none">
                    <div className="">
                        <div className="description px-5 py-5 sm-425:py-[10rem] sm-375:py-[10rem] sm-320:py-[10rem]">
                            <div className="flex flex-col ">
                                <img 
                                    src={check} 
                                    alt=" success check icon"
                                    className="w-20 h-20 mx-auto"
                                 />
                                <h1 className="text-black text-2xl text-center font-semibold py-3">
                                    Thank you for registering for MLSA Ghana Days 2023
                                </h1>
                            </div>
                           <h2 className="font-medium text-base text-center mt-2 text-gray-600">Kindly check your email for a confirmational message.</h2>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    )
}

The success page only contains styling for the page and does not include any functionality but just displays the page.

Now we are done, but you must test your application to make sure it works and after form submission, it saves the data to Excel. I will include a demo video here to show you how my version of the web app functions and looks.

Conclusion

In conclusion, we have embarked on an exciting journey of building a registration form with React, harnessing the power of Power Automate. By leveraging the capabilities of React Hook Form and Axios, we have achieved seamless form validation and submission.

The integration of Power Automate and React has demonstrated how low-code solutions can complement traditional software development, enabling us to create robust applications with ease.

I hope this guide has inspired you to explore the endless possibilities of integrating drag-and-drop tools like the Power Platform into your development projects, we are only limited by our imagination by the extensibility of the Power Platform.

You can find the link to the GitHub repository of the source code here.

Feel free to share your feedback and connect with me on LinkedIn and Twitter. Let's continue innovating together!

Support me by, BUYING ME A COFFEE. 🙏

Power Automate and React Integration: Automate Business Processes

Prince Adimado — Mon, 27 May 2024 15:00:50 +0000