Power Apps

Building responsive apps using Power Apps Canvas

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

Common use cases for Power Platform

HABY JOSEPH

Common Power Platform use cases using Power Apps & Power Automate are as follows:

power-platform-use-cases-2020

Power Platform use cases are listed below:

Asset Management

 – Organizational asset issue and return management, with approval request and tracking, integrated with office 365 providing single sign-on. Separate employee app and asset team app. 

Vendor Invoice Automation 

– Powerful application for efficiently managing your entire vendor invoice management process on-the-go with enterprise-grade security.

Employee Productivity management system

– (Attendance, Timesheet, Leave, Reimbursements) – Intended to effectively track your workforce, by monitoring employee leaves, time and attendance, as well as work shifts. 

Inspection & Audit Management

– Integrated app used by the sourcing and quality teams to manage the quality and timely delivery of products by vendors, with clear roles defined for managing the various tasks.

Expense approval system

– Streamlines and automates the workflows associated with creating, approving and controlling expense claims. 

 360 appraisal system

– Sets out automatic reminders of upcoming schedule such as employee appraisals, training course, follow-ups and other important dates and meetings. 

Visitor Management System

– Monitoring and tracking the visitors effectively as well as reduce the risk of unwanted intruders and trespassers inside the facility 

Client or Sales Registration forms

– Lets clients sign up for an account or service with a specific company 

Know your Customer system

– Enables frontline staff to conduct KYC with ease and perfection with defined process and checklists moreover allow users to take customer photos, upload their documents, provide status updates and submit KYC while with customer.  

Capital expenditure Management

– You can automate your Expense approvals, involving your stakeholders, subject matter experts, and managers. It’s a Budgeting solution for any organization that requires multiple approvals. 

Requisition Management System

– Web application to manage the various purchase requisitions of the organisations from initiation, capturing the various product inputs, technical evaluation, vendor management, etc..

Extending your SharePoint Portal using Power App mobile apps – This tool provides a report for each analyzed page showing how the page performs against a defined set of performance criteria.

Also Read More about – Microsoft Power Platform in detail 

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.

Microsoft Power Platform in detail

HABY JOSEPH

What is Microsoft Power Platform? 

Microsoft Power Platform is pioneering the digital transformation, aiming to help companies re-imagine how to bring people together, Data and processes creating value for your clients and in a digital first world maintain a competitive advantage. 

The Power Platform consists of FOUR core applications: 

  • Power Apps

    —Turn ideas into organizational solutions by enabling everyone to build custom mobile and web apps that solve business challenges. 

  • Power Automate

     — Boost business productivity to get more done by giving everyone the ability to automate organisational processes. 

  • Power Virtual Agents

    —Easily build chatbots to engage conversationally with your customers and employees—no coding required. 

  • Power BI

    —Displaying your business data in interactive, real-time dashboards and reports to provide detailed insights.Microsoft Power Platform

CDS – Common Data Service allows you to store and manage data that business applications use securely. Data is stored on a set of entities within the Common Data Service. An entity is a set of data storage records, similar to the way a table stores data within a database. Common Data Service includes a basic set of standard entities that cover typical scenarios, but you can also use Power Query to create and populate custom entities specific to your organisation with information. Then app makers can use Power Apps to use this data to create rich applications.

AI Builder – is a capability of Microsoft Power Platform that you can utilise to improve business performance by automating processes and predicting results. AI Builder is a turnkey solution which delivers AI power through a point-and – click experience. You can add intelligence to your apps with AI Builder, even if you don’t have the coding or data science skills.   

Within Power Apps Studio or the Microsoft Flow website you can access AI Builder from the navigation pane. The simple wizard like experience is tailored to empower every developer in accordance with the power platform’s essence. Under the ‘Models’ tab of the AI Builder, you can access all of your AI models in a single pane, providing up front key information about each model in a tabular format. Clicking on a particular model takes you to its details page, where the user is made available with other key information and actions. You can perform actions like publish and test the model, view the model efficacy and weights of data contributing to it or view other recommended rom the details page. You can perform actions such as publishing and testing the model, viewing the effectiveness of the model and the weights of the data contributing to it or viewing the details page of another recommended rom.

 
Portal Power Apps makers can now create a powerful new type of experience; external websites that allow users outside their organisations to sign in with a wide variety of identities, create and view data in the Common Data Service, or even anonymously browse the content. 

For creators to quickly build a website and customise it with pages, layout, and content, these capabilities feature a revised end-to – end experience. Through templates, makers can reuse page designs, add forms and views to display Common Data Service key data, and publish it to users. 

See how to automate machine learning processes to enhance the usage of AI with Power Automate. The process of how to use pre-built AI tools inside Power Automate, and show how this automation can be used in the Power Platform, furthermore how to use form processing, using AI Builder and Power Automate, to read handwritten forms. Learn how to detect the objects and activities in an image using Power Automate, Power Apps and Cognitive Services.   

With such a wide array of applications, Microsoft is a leader in the enterprise tools and apps market. These applications range from standard Office 365 productivity tools, business back-end systems in Dynamics 365, or hundreds of Azure’s cloud services —just to name a few. 

Also Read More about – Common use cases for Power Platform

How does Power Platform collaborate together with all 4 apps? 

All four of these applications have different functionality but can work together to significantly improve your operations. In fact, to gain a deep perception, here is a case in which all applications in the Power Platform can work together. 

An app has been created on Power Apps which allows salespeople to create sales orders on the go, meaning they don’t have to wait until they’re back in the office to fill out the sales order. The salesperson goes to a client site, finds out what they need to order and fills out the required information on the app, storing the data in the CDS. Then Power Automate workflow has been set up to send an automatic email notification to a manager to approve the sales order as soon as it has been filled out. A Power BI dashboard has been created to display sales data, tracking various metrics relating to item sales, sale locations, number of sales for each salesperson, etc. Finally, with the help of Power Virtual Agent AI bots, you can know the status of your order, whether it’s approved or at what stage. 

 

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.