Building responsive apps using Power Apps Canvas

What is a Responsive design?

Responsive design by the terminology means a dynamic or fluid design, which can adapt to any screen size irrespective of the device on which the end user is using the application. One of the key aspects when a customer looks at new application development is the capability to have a responsive design for the application responsive Power Apps Canvas, which helps them to give the end users same experience on a large screen like in a desktop, to a mobile device like in a mobile phone. The need of a responsive design is becoming critical in every customer decision making whether it’s a new custom development or even a platform driven development approach.

Microsoft Power Platform, a low code / no code application platform (NCAP) provides this capability in the rapid application development using Power Apps. The key thing to note is the fact that in a traditional development, such a responsive development would require a good amount of work from a UI/UX engineer working in detail using CSS. This approach reduces the time taken for such development. 

How to create an new App using Power Apps?

Steps to create App.

  • Go to chrome and type
  • It will lead to sign in, give credentials Email and Password to sign in.
  • Once you login in left hand side you can see different options such as Home, Learn, Apps etc.
  • Click on Apps.
  • Once you click on App on top you can see New app option.
  • When you click new app, you can see 3 options such as Canvas, Model-driven and Portal.
  • Select Canvas
  • It will lead to new tab where you can find 2 options for creating app (Please refer below screenshot).
    • Phone Layout and Tablet Layout in Blank App (you need to insert all controls)
    • Phone Layout and Tablet Layout in Template App (prebuilt templates will be given you can modify)
  • As we are building Responsive canvas app, please select Phone Layout as your preference (Blank or Template).
  • For more detailed information on creating app please refer:

Power Apps has provided some new features enabled to make an app responsive. We need to follow below steps.

  • Once you create app you can find on top menu you can see File, Home, Insert, View, Action.
  • Click on File.
  • On left menu click on Setting
  • You can see one more menu list beside left menu.
  • Click on Screen size + orientation.
  • Beside one more screen visible as shown in the below screenshot.
  • Off the Scale to fit, so that your app will fix to whichever window size.
  • Off the Lock orientation, so that it will not affect while your mobile rotation will be done.
  • To save the changes click on Apply and save the app and publish.
  • How to add screen and form?
  • To make the Form we are creating responsive, we need to follow below steps.
  • Click on Home option in top menu.
  • Click on New Screen
  • Click on Insert option in top menu.
  • You can see all different controls such as gallery, form, button, input etc.
  • Click on Form, you can see 2 options.
    • Edit
    • Display
  • Select Edit Form

Once you insert form you can see as shown in below screenshot.

How to configure form

How to configure form?

  • You can find on right side Property name called DataSource.
  • Click on dropdown of DataSource.
  • You will get list of entities (Tables), you can select for which entity (Table) you want create form.
  • Once you add DataSource, below Datasource property you can see Edit fields.
  • You can select fields of form which is required.
  • In below you have one more property called Default Mode
  • Select Default Mode as New for the new form.
  • In form on left side, you can see Tree View.
  • You can see inside form DataCard.
  • In DataCard you will be having 4 controls
    • StarVisible – If the field in form is required then star will be visible.
    • ErrorMesssage – If the field is mandatory, without filling this field if you try to save, then error message will be shown.
    • DataCardValue – It is used to enter the data by end user (Depends on datatype)
    • DataCardKey – Name of your field which you have entered in your table.     

You can see below screenshot how it displays if you try to submit form without filling detail which is mandatory field.

How to make the form as Responsive?

  • Set Columns to 4 (So that we can see 4 field in single row for browser)
  • Set form width property as Parent.Width (Note: Width will automatically adjust to browser or mobile width)
  • Set form Height property as Parent.Height (Note: If give Parent.Height it will set to screen height, in below image I have given Parent.Height-250, so that we can place Submit button below)
  • Select Datacard of your form.
  • Set DataCard Width property as Parent.Width./App.ActiveScreen.Size
  • Set DataCard Width property to all DataCard. (You can use Ctrl+A to select DataCard at a time)

Once you done with above steps you can see your form as responsive.

  • The below screenshot shows your mobile app while playing it will set to browser width.
View – Laptop/Desktop browser

If you reduce to half of your browser, then the form will automatically adjust to your browser size.   

View – Tablet

If you reduce to Mobile size your browser, then the form will automatically adjust to your browser size.

View – Mobile Phone

Blog authored by Jeniviya M., Power Apps Consultant at Sysfore Technologies.

Also Read More about – Power Apps Platform

You can talk to one of our solution experts today to learn more about you can leverage Power Apps and the Power Platform in your organization.

Sysfore is a Microsoft Gold Partner with unique customer stories using the Microsoft Power Platform. Being a low code/no code platform, partner could help customer in quickly building apps for their key business challenges leveraging the various solution components. As requested sharing with you the solutions which Sysfore has already built on Power Apps platform for customers.

Get Sysfore Cloud Managed Services For Your Enterprise

Sysfore, A Microsoft Cloud solution provider and a Gold Partner, uses leading network, technology, and service expertise to deliver our service anytime, virtually anywhere, quickly and efficiently. We have helped over 80 small enterprises and 30 mid-sized enterprises across the globe for a successful cloud migration in the past 8 years.
Contact one of our experts today and we will help you find the perfect solution for your business. Write to us at or give us a call at +91 (80) 4110 5555.

DevSecOps Explained

What is DevSecOps?

DevSecOps = Development + Security + Operations

A method of identifying security vulnerabilities in the development phase is DevSecOps.
These days data protection has become essential for every company and organization to protect their users’ data and ensure there is no vulnerabilities and breach. People and organizations are aware of their data safety needs and they’re often more concerned about where and how their data is being transferred and stored.

What problems does DevSecOps solve?

  • Stops cloud adoption and continuous dev cycles from circumventing traditional security process and checks
  • It suits data protection laws like GDPR and CCPA and many more
  • It helps you develop software that meets the data security standards
  • It is a security-driven software solutions approach. It promotes security as a collective responsibility for everyone in the organization
  • It streamlines data storage, processing, and collection that can guarantee proper compliance
  • A logical, strategic and potential approach to software development with security as a key component

In the present era, data security has become a major concern or pain area for any business or organization. Through the introduction of “security as a language” methodology, every enterprise may use a strong mix of security and agility to encourage teamwork and openness in the production of applications.

What does DevSecOps do?

DevSecOps is the perfect platform for applying security from the beginning. DevSecOps will not position security at the end of the life cycle, but at each point, to make sure the production phase runs safely and smoothly. DevSecOps enforce security as a shared responsibility that can measure applications security from the starting phase of software development.

Don’t miss reading? Cyber Meteorology

What is DevSecOps Methodology

DevSecOps is based on the principle that security is a shared responsibility within DevOps. The aim of DevSecOps is to integrate security in every aspect of the development/deployment lifecycle. DevOps has become integral to the development of agile organizations who are looking for rapid sustainable growth, CI/CD means that there are continuous updates that run which means that security has to be a key factor. Integrated security means that there are minimal disruptions during the introduction of innovative features. Integrating DevSecOps means a paradigm shift of new processes and tools.


In reality, it’s clear that applying security in every app development phase has been the most challenging function. Throughout the previous process of production, security was carried out for firms and restricted to those team leaders only. This is because past tech programs were shipped in months or years but are now completed within a matter of weeks.


Get Sysfore Cloud Managed Services For Your Enterprise

Sysfore, A Microsoft Cloud solution provider and a Gold Partner, uses leading network, technology, and service expertise to deliver our service anytime, virtually anywhere, quickly and efficiently. We have helped over 80 small enterprises and 30 mid-sized enterprises across the globe for a successful cloud migration in the past 8 years. Contact one of our experts today and we will help you find the perfect solution for your business. Write to us at or give us a call at +91 (80) 4110 5555.

How Retailers Can Drive Productivity with Microsoft Power Platform

How Retailers Can Drive Productivity with Microsoft Power Platform

The modern retailer is challenged with sustaining business growth and accelerating new product innovation without losing one’s eye on the customer. Here are the challenges faced by retailers:

  • How to transform a potential customer into a loyal customer.
  • Move from disparate, siloed reporting to a single source of truth.
  • Create a foundation for advanced operational analytics.
  • Improve customer experience and innovate by leveraging data.

The risk of losing customers to competitors is a common fear of the retailer. It can only be overcome when retailers adapt a strategy that allows them to create a meaningful and useful experience for the customer. What is needed is an architecture that helps in identifying the customer’s changing tastes and how to make better decisions with changing behaviours. The way forward is in adopting flexible and adaptive systems. AI Builder, Power Apps portals, Power BI, Microsoft flow – helps to create automated workflows between your favourite apps and services to get notifications, synchronize files, collect data, and more.


What are AI Builder and Power Apps and How They are Beneficial for Different Industries

In order to leverage AI and machine learning to make apps and automation more intelligent, AI builder provides solutions for app makers to solve everyday tasks like – forms processing, object detection, and text and binary classification.

Where Power Apps enable the employees to create apps for business, AI builder enables in adding AI capabilities to those apps. Banking, hospitality, manufacturing and many more industries are potential users for AI builders. In the retail industry, forms processing can be used for invoices or tax forms to extract information from these documents. Object detection – In the retail industry, it can be used to simplify inventory management, allowing retail leaders to focus on on-site customer relationship building. For instance, a retailer can improve customer service by using AI to analyze customer feedback responses, map them into categories, and generate an AI model to classify and respond to customer feedback as it is received.

The manufacturer, distributor, marketer of the full line of Pepsi-Cola products giant G&J Pepsi has more than 1600 employees. The G&J Pepsi IT team uses AI Builder and Power Apps to create the next generation of their Store Audit App, enabling better mobility and efficiency for field personnel whose job is to assess product needs on the shelves in stores.

“With AI Builder, we were able to easily build an AI model to help automatically identify and track our products using the object detection model. For our field worker, it’s now as simple as taking a photo and letting AI builder do the rest.” – Eric McKinney, Enterprise Business Systems Manager at G&J Pepsi.

AI Builder makes it easier for users and organizations to optimize processes and intelligence without having advanced knowledge of how AI works. The no-code AI builder capability is also coming to Microsoft Flow. Flow provides a visual experience for a range of users.


How Microsoft Flow Extracts Meaningful Data from Images and Text

Today, many processes involve paper forms such as a rental or job application. Historically, the first step in processing these forms would be to have someone look at the paper and manually type in each of the fields on their PC.

Now with AI Builder and Microsoft Flow, flows can automatically pick up scanned documents from an incoming email or a file server and recognize all the content. Based on the values in the form, different steps can run—from sending out simple notifications to performing a credit check.

For instance, the field teams at G&J Pepsi have always embraced technology on behalf of their customers. When the IT department was tasked with delivering more on-the-go services for the company, they embraced the opportunities and challenges. By using Microsoft Power Apps, Power BI, and Microsoft Flow, the seven-person team created custom applications to automate the company’s store audit and merchandising process. They were able to build, deploy, and manage this scalable end-to-end solution without previous app development experience.

Power BI dashboards visualize the data for quick overviews and deep dives into the numbers, and Microsoft Flow—another cloud-based service—triggers alerts to the relevant teams.

Microsoft Flow for Retail
Image source: Microsoft

Microsoft Flow enables users to automatically process and route analog forms. The retailer doesn’t have to remember everything. The AI builder learns and improves itself. For example, it can predict the risk of an application and, depending on how high that risk is, add additional approval actions to a business process. All of this is possible for Flow makers without having any expertise or experience with AI.


What is Blockchain and How it is Used in Power Apps and Microsoft Flow

Blockchain can bring trust and transparency to business processes that span multiple business partners.

Applications built on blockchain using Power Apps and Microsoft?Flow?can easily create attestable workflows that bring together data from every point in the business process across the value chain. For mobile clients, Power Apps can effortlessly capture all of the information from the phone’s sensors (barcodes, photos, GPS coordinates, etc.) and send it to a smart contract on a blockchain.

Some industry examples that leverage the power of blockchain and the Power Platform include:

  • Multi-party supply chain: manage shrinkage risk between point-of-manufacturing and point-of-sales by building applications and workflows that provide irrefutable proof of delivery of shipments.
  • Food safety: retailers can get real-time insights when goods that can be impacted by temperature and humidity are in transit. Blockchain can provide real-time insight with trustworthy data that can help avoid costly public health issues, streamline return processes, and dispute resolution.
  • Attest genuine media: Build applications that can attest and/or validate that media is genuine with Power Apps and Flow.

What is Power BI and How it Helps Retailers

Power BI has been a pioneer in applying AI to business intelligence and making AI accessible to everyone. New AI capabilities enable retailers to detect objects in images, analyze free-form text, build new machine learning models, and automatically understand what drives outcomes, all with point-and-click simplicity.

Kinepolis is a cinema group operating 53 complexes throughout Belgium, The Netherlands, France, Spain, Luxembourg, Switzerland, and Poland, as well as 44 cinemas in Canada. The company uses Power BI AI capabilities to understand how they can improve their visitor experience by analyzing the sentiment of customer reviews and tweets.

“Kinepolis serves visitors in and from many countries, who vocalize their opinion through various channels. With text analytics in Power BI, we are able to structure and analyze all this feedback. It allows us to score the sentiment of our visitor reviews without investing in the data science behind it.” – Carlo Wambeke, technical lead BI at Kinepolis.

A retailer can make better and informed decisions, improve operations with Microsoft Flow – with built-in AI builder, Power Apps portals and Power BI – without having any expertise or experience with AI.

Sysfore, A Microsoft Cloud solution provider and a Gold Partner, uses a leading network, technology, and service expertise to deliver our service anytime, virtually anywhere, quickly and efficiently. We have helped over 80 small enterprises and 30 mid-sized enterprises across the globe for successful cloud migration in the past 8 years. Contact our experts today and we will help you find the perfect solution for your business. Write to us at or give us a call at +91 (80) 4110 5555