Building responsive apps using Power Apps Canvas

December 15, 2020May 25, 2021Ajith George

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 make.powerapps.com
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: https://docs.microsoft.com/en-us/powerapps/maker/canvas-apps/get-started-test-drive

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.

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

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

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 info@sysfore.com or give us a call at +91 (80) 4110 5555.

Low Code No Code application development platform

September 12, 2020February 26, 2021HABY JOSEPH

Low-Code No-Code mobile application business development platform

If you own or run a small company, you know that low code no code would help to simplify and streamline your processes to make you more productive and overall reduce your costs by using this application development platform. You can however find that, complex processes and business problems cannot be solved easily by your current framework.

For your specific challenge, there is often no out-of-the-box solution or software and only a custom app can best solve the problem, which can be expensive and time-consuming for an SMB. This is where the low code no code application development platform plays a vital role.

Low-code is a visual treat to designing apps. In order to facilitate the accelerated implementation of a range of tech solutions, low-code abstracts and automates every step of the application lifecycle. To facilitate continuous cooperation, it splits the conventional silos of business and IT.

The adoption of low code no code application development platforms has been driven to the fore by increased business demand for technological solutions and a shortage of trained developers.

How to build Low Code No Code web application without code?

Low-Code No-Code platforms abstract away application development decisions like what database to use, the language to write the back end, and the front-end framework to create the user interface and experience. Sysfore allows anyone from the senior engineers to business analysts with no programming expertise to easily create enterprise-grade software, to collaborate together across the company with greater openness, and to control over a controlled framework that ensures quality and accuracy at every step of the way.

The tech industry faces a major transformation, close to the revolution we have experienced in other markets, such as health care and manufacturing. We’ve all seen how Google Docs stormed the globe with free cloud-based applications, prompting Microsoft to change its Office 365 business model. Cloud-based computing is the standard.

Now we’re going to have another tech business jolt. Yet, unlike other transformations that disrupt traditional markets, low-code and non-code computing promises to make software itself more pervasive than it is currently. In full disclosure, I am deeply interested in the low-and no-code marketplace as a co-founder of a “no-code” tech platform called upBoard that provides an easily customised business process app marketplace.

Low Code Vs No Code app services

Low-code software is a program that can be completely customised with a “low” (minimum) amount of programming. It can be completed in a few hours or days instead of taking weeks or months to create a custom application. Although low-code software also needs coding by someone who is competent about technology, it is simpler and cheaper than ever before. Salesforce and Zoho are few examples of low-code systems.

No-code tech, on the other hand, brings the low-code idea to a new level, allowing practically anybody to adapt the framework to their needs without any programming experience whatsoever. Pipedrive and Airtable are examples of the non-code platforms.

For now, all types of software are mostly clustered together under the “low-code” segment, but no-code software will emerge as its own industry category and power in the coming years, as no-code software enables everyone – including those with zero technological expertise – to configure their business processes, dashboards, etc.

Who’s going to build on low-code app?

Anyone who has an idea will use low-code to create applications. Dedicated programming environments for enterprise users and technical developers, low-code is designed to increase and synchronise the work of numerous developers.

Major trends. Huge Shifts. Great Prospects

Gartner estimates that the low-code technology frameworks will account for 65 percent of all software growth by 2024. This suggests that most of the applications produced in 2024 will be built using frameworks and tools that include turnkey programming options.

Low Code No Code and Microsoft Power Apps

Power Apps is a low-code development platform from Microsoft that helps you to create advanced custom apps easily, cost-effectively and efficiently and drive business performance. It accelerates software creation with pre-built models and drag-and-drop simplicity that expands app features with customized components as you need them.

It even links applications to your data by clicking a button, so you’re still ready to act on new insights, without violating your protection, governance, and enforcement standards.

It is now time to implement groundbreaking technology. Digital disruption is just a hazard when you’re in the field, but you’re sitting on the sidelines.

5 Tips to get started with Low Code App Development

1) Get to know the tools of the trade

Power Apps helps you turn ideas into organizational solutions by enabling you to build custom apps that solve business challenges. If you’re familiar with tools such as PowerPoint, Excel, or SharePoint, you’ve already got a head start—you’ll find working with Power Apps to be a similar experience.

With Power Apps, you can easily create useful business applications through a user-friendly interface, no coding required.

Get to know Power Apps in our beginner’s learning module, “Get Started with Power Apps.”

2) Small is beautiful

When building your first app, smaller is better. Choose a well-defined task for your app to perform and get clear on what success looks like. Creating a solution is a lot easier when you have a clear idea of what the problem is. This will allow you to dive in and start exploring while staying focused. For example, an app that displays information from a spreadsheet or a SharePoint list is easy to build and customize.

3) Know your audience

Understanding the problem, you’re going to solve and the data you’re going to use are important first steps to creating a great app. The final piece of the puzzle is knowing who is going to use your app and how. By starting with a challenge that you’ve experienced yourself, this process is made much simpler.

If you and your team will be the users, it is easy to figure out whether you’re more likely to access the application through a mobile phone or a tablet, for example. Choices like these will influence how you build your app.

If you are not the target audience for your application, take some time to understand the needs of those who are. What devices do they use? What’s their day like? What value will your solution provide? Putting yourself in their shoes will help your app be more successful.

Power Apps can be made responsive, or you can publish them for specific screen layouts such as a phone, tablet, or browser. It’s helpful to decide which types of devices will access your app before you start creating.

4) Take a well-marked path

Familiarizing yourself with the fundamentals will help you get off to a great start. Microsoft has created clearly defined learning paths for

Power Apps that start with the simplest concepts and work up to more advanced capabilities.

The best place to start is with the learning path called “Create a Canvas App in Power Apps.” It will guide you from Power Apps fundamentals through creating and customizing a sample app in just a couple of hours.

For more resources, visit this Power Apps blog post, which is frequently updated with the newest content.

5) Keep data privacy top of mind.

When you use Power Apps, you are building on a highly secure and governed platform created by Microsoft. It is designed for enterprise use, with built-in controls governing data access, security, and compliance. Microsoft is a trusted partner to IT departments.

Nevertheless, it’s important to consider whether any of the data captured or displayed by your app could be considered sensitive or proprietary and to take appropriate precautions. Talk to your IT department if you need help navigating this aspect of your application.

The Power Apps governance documentation is a good page to share with any IT professionals who have questions or concerns. It shows how the platform supports enterprise-grade security and control.

Also Read More about – Microsoft Power Apps Platform in detail

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.

Get Sysfore Cloud Managed Services For Your Enterprise

Microsoft Power Apps

August 3, 2020February 8, 2021HABY JOSEPH

Microsoft Power Apps Platform

What is Microsoft Power Apps

Microsoft Power Apps enables you to build zero or minimal code web and mobile applications, enabling you to turn your ideas into feature-rich apps that can transform your processes digitally, solve business problems, or increase business value. You can interact with intuitive visual tools that do not require code, work faster with a platform that allows data integration and distribution, and for professional developers to extend the platform with building blocks.

As it integrates with Microsoft applications such as SQL Server, SharePoint, OneDrive, as well as third-party applications such as Dropbox, Google Docs, SAP, and Oracle, the scope of use of Power Apps is huge. In addition, Common Data Service, the enterprise-grade datastore on which Microsoft Dynamics 365 apps are natively built, is built-in, eliminating the need for further integration of data.

With these capabilities, you can drive enhanced mobility, productivity, and innovation in your organization.
From tailored apps to advanced applications
Power Apps enables you to create a broad range of app scenarios that infuse digital transformation into manual and outdated processes.

Canvas Apps

Canvas applications allow you the opportunity to organise the user experience and interface the way you want it to be. To create a highly personalised interface with the power of a blank canvas, begin with your user experience, connect it to a choice of more than 200 data sources. For online, smartphone, and tablet applications, canvas apps can be built.

Model-driven Apps

You use the Common Data Service ‘s power to quickly configure your forms, business rules, and process flows when you create a model-driven app. Start with your data model, building up to model forms, views and other components from the shape of your core business information and processes in the Common Data Service. Model-driven apps generate a great UI automatically that is responsive across devices.

Microsoft Power Apps: Features

Although it can sound like a difficult challenge to build applications, Microsoft Power Apps provides many features and functionality that help you create them as a professional and with minimal effort, most importantly.

Feature model

Common Data Service to store data
200+ connectors to integrate data and systems
Pre-built templates
Drag-and-drop designer
Power App Canvas
AI Builder and pre-built AI components
Portals (for no code responsive websites)
Role-based user experience customization
Pixel perfect website development
Several app scenarios
Wide variety of controls such as camera and location
Logins via authentication providers like LinkedIn and Facebook
Private and secure submission of information

Microsoft Power Apps: Benefits

By rapidly building low-code apps that modernise processes and resolve business challenges, Microsoft Power Apps boost agility across your organisation.
Work faster with data integration and distribution
Enhance mobility and innovation with no code capability
Enhance productivity with prebuilt AI scenarios
Simplify tasks and enhance prediction with AI Builder
Gain value from data
Improve user engagement
Forrester Consulting’s commissioned report, a Total Economic Impact™ study, showed that Microsoft Power App consumers experienced 188 percent ROI in three years, 74 percent decrease in app production costs, and 3.2 hours / week average increase in productivity of line-of – business workers.

Why Sysfore Technologies?

You can ensure that your application is all you need and more with a Power Apps partner, capable of deployment all across your business, pulling data from internal and external applications and delivering analytics-based insights that take your data to the next level.

Sysfore Technologies offers data integration and analytics expertise, a solid understanding of data architecture, enterprise-grade application building experience, and a deep industry partnership with Microsoft to help you create tailored Power Apps for your business. We handle the end-to – end process and take care of all collection and UI design specifications and use the Common Data Service to map diverse data sources within the business.

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.