Menu Close

Tag: #uk365guy

How to build Split Screen responsive canvas apps

uk365guy

Hello Everyone,

Today i am going to share how we can create Split Screen responsive canvas app what are the configurations we need to do.

Part 8 Series.

Lets gets started.

Login into www.make.powerapps.com

Click on Start with a page design.

Then on the next screen select the Split-Screen option.

Just add content! This page adapts to different screen sizes. It has two sections, each taking up 50% of the screen width.

Select this option if:

1. You want a lightweight, responsive app.

Uses data from Once created, connect your app to Dataverse, SharePoint, Excel, SQL and more.

Split-Screen:

The Split-Screen has two sections in the layout on the screen, each occupying 50% width of the screen on desktops. On mobile devices, the sections are placed one below other, each occupying up the entire screen width.

New screen will be displayed with dual screen see below screenshot.

As you can see the screen split into two left side container1 and rightsidecontainer1.

Treeview section Screen1 ScreenContainer1 with LeftSideContainer1 and RightSideContainer1.

You can start designing your canvas app by selecting an Item from the Insert Pane according to your App requirements

For more information about designing the app with responsiveness principles here

I hope this helps.

Malla Reddy(@UK365GUY)
#365BlogPostsin365Days

Share this:

How to create Power Apps using an image or Figma file

uk365guy

Hello Everyone,

Today i am going to show how to create Power Apps using an Image or Figma file.

Part 7 Series

Lets gets started.

Login into www.make.powerapps.com

Click on start with page design.

Click on An Image or Figma file.

On the next screen choose a content type to start:

1. Start from an image: You can draw an sketch and import as an image.

for example: Registration Form or Survey form etc..

2. Start from Figma: You can start from the Figma UI Kit, its a tool to design your own image.

First we will see how to create an Power App using an image.

Click on the “Start from an image” as show on the above screen shot and click next.

In this example i am using sample image to create an Power App, refer to above screenshot and choose the format either tablet or phone and click NEXT.

Next screen it will show the components on the image form, it automatically recognize the text and diagrams and picks the appropriate data types check above screenshot.

Connect to a Dataverse table to connect or create a table on Dataverse.(refer to above screenshot)

Or you can skip for now if you are not sure of any data that you need and you want to do this later then you can choose this option.

In this example i am connecting new table so choose first option and click next.

Select a table to store data or choose an existing dataverse table or make a new one(refer to above screenshot).

So i have chosen new table and click next.

Next screen will create the table properties like the display name and data type of the image we have uploaded. If you are happy with the columns applied and display name and data type you can click next.

Review screen will be displayed with the display name, name, data type. If you need to change anything you can go back and adjust it.

Otherwise click on the “Create app”

New app will be created and its in design mode, if you are happy with the design then save and play and then publish your app.

If you want to create Figma file in action follow this link to create figma file here

Thats it for today.

I hope this helps.

Malla Reddy(@UK365GUY)
#365BlogPostsin365Days

Share this:

How to create Model Driven App usable in offline and handle enterprise scale data

uk365guy

Hello Everyone,

Today I am going to show how to create a Model Driven App that need to be accessible offline and handle enterprise scale data.

You can build an app on top of data that’s already stored in Dataverse – the smart, secure, and scalable low code data platform.

Part 6 series

Lets gets started.

Login into www.make.powerapps.com

Click on the “Start with a page design” and new screen will be displayed.

Click on the Blank page with Navigation:

Select this option if:

1. Your app needs to be usable offline.
2. Your app needs to handle entreprise scale data.

Uses data from Dataverse tables.

New screen will be displayed see below screenshot.

Give your app a name ” OFFLINE ACCESS APP” and you can use CUSTOM SOLUTION as your APP datasource if you want you can check the box as shown on the above screenshot and finally click on CREATE button.

Select the existing table as i am showing case table, if you want you create a new custom table too.

Select the case table and add to the navigation pane check box.

Finally click on ADD.

Case added to the navigation pane on the left hand side of the above screenshot and view of the cases in middle screen and case display setting on the right hand side.

Save, publish and play

Then new screen will displayed when App is played.

That’s it for today.

I hope this helps.

Malla Reddy(@UK365GUY)
#365BlogPostsin365Days

Share this:

{How to create } views and forms directly from maker portal

uk365guy

Hello Everyone,

Today i am going to show how to create the views and forms directly from the maker portal.

This is Part 5 Series

Lets gets started.

Use Case:

Customers building apps for Dynamics 365 frequently use this template, use data from Dataverse tables.

Login into www.maker.powerapps.com

Select the “Start with a page design”.

Then select the View and form:

Create a collection of pages that you’ll connect to data.

For each data table you connect, you’ll get
1.One page with up to eight different data views of a table.
2.One page with a main form for adding and updating table rows.
3.Additional forms that make working with data easier: quick view, create and card forms.

For more information about building your first model driven app here

When you select the View and form then it will prompt to give it a name for your MODEL DRIVEN APP.

You can select the custom solution as well to use components on View and form, refer to the above screen shot.

Click CREATE.

New screen will be displayed which will give two pages for each table.

1. You get a view, which displays the rows and columns of the table.

2. You also get a form, which lets people interact with the table by editing existing rows, or by creating new ones.

Select the “Account” from the screen and click “ADD”. (Refer to the above screenshot).

Then new model driven app will be created in design mode:

Now you can see the two pages on the left hand side of the model driven app.

1. Account forms

2. Account views

You can change the view from the ” My Active Accounts” DROPDOWN.

Click on Save, and the Publish and then PLAY.

Then MODEL DRIVEN APP will be in play mode.

You can create a new account by clicking on the +NEW button on the site map.

Thats it for today.

I hope this helps.

MallaReddy(@UK365GUY)
#365BlogPostsin365Days

Share this:

How to create Canvas App from Scratch on Maker Portal

uk365guy

Hello Everyone,

Today i am going to share how to create a canvas app from Maker Portal.

This is part 4 series.

Lets gets started.

Login into www.maker.powerapps.com

We can create Canvas app both ways from “Create” button or “start with a page design” and click on blank canvas app.

As you can see underneath the Blank Canvas, there is Tablet or Phone format, you can select according to your requirement.

If you select the tablet format still you can see the phone format but for maximum optimization, if you have use case for mobile then choose “Phone” format.

As you can see from above screen shot blank canvas screen will appear and you can select the form or gallery to start creating your Canvas App, but i want to show from scratch so click on SKIP Button.

On the above blank screen i have clicked on the Insert button and clicked on the Text Label and align it into the center as i have highligted on the right hand side properties section.

I have renamed the Text Label to ” Accounts” as i am going to choose the data source from Dataverse.

I have choosen the vertical gallery to show the data in it and connect to source data.

We can connect the data source from multiple places as i have highlighted on the screen shot above, so i have chosen datasource from the properties on the right hand side from datasource drop down.

Also i have renamed the as Gallery Account Gallery and image is uploaded for the accounts as you can see same image for all the accounts.

Now we have datasource and Gallery on our canvas app and we need a home screen where we can click to come back to main screen.

So i have created another screen and renamed it as HOME SCREEN and also uploaded an image books.

On the screen shot right hand side properties section you can choose colour of the button and fade colour too. Placed a button and renamed as “START”

Onselect of the button Power Fx formula: Navigate(MainScreen,ScreenTransition.Fade)

then the Main Screen will be displayed.

Now we have two screens

1. Home Screen

2. MainScreen

We need another screen edit screen when any account is opened.

Create another screen called “Edit Screen”

Then rename the edit button and give it a datasource.

Power Fx formula on Item= AccountsGallery.Selected

Now we have Edit Screen and then we need a connection from Main Screen to Edit Screen.

How do we do that:

select the chevron and on Power Fx Bar OnSelect = Navigate(EditScreen,ScreenTransition.Fade)

Then it will be navigated to the Edit Screen.

Now lets see in action, play Select ” Home Screen” and Click on PLAY Button, you will land on HOME SCREEN and click on the START and it will navigate to Main Screen and when you select any account it will navigate to Edit Screen.

I hope this helps.

Malla Reddy(@UK365GUY)
#365BlogPostsin365Days

Share this: