In this blog we will see, how to create Canvas mobile app automatically using CDS for Apps. We will also cover basic customizations comes out of box with PowerApp.

  • In PowerApp Studio (desktop application), click on New on left navigation and select Common Data Service Phone Layout option for your app

PC1

  • You will be asked to choose from connections or create new. Click on Create button. You will be asked to sign in for Power App if not already signed in.
  • Once connection is created, choose entity/table for data to be used in your app. In my case it is “Companies”. Refer my blog on how to create entities. Click on Connect.

PC2

  • PowerApp here will automatically create initial version of app for you with 3 screens: Browse, Detail and Edit
    • Browse Screen – with gallery control populated with records of entity data source. In my case “List of Companies”
    • Detail Screen – will open when user selects an item on Browse screen and display details for selected item
    • Edit Screen – opens when user click on edit button on top right of Detail screen with all fields in edit mode

PC3

Change Theme:

  • Select Home menu and click on Theme. Choose any theme

PC4

Change Layout & Update Data Fields:

Browse Screen:

  • Select Gallery control either by click on BrowseGallery1 under BrowseScreen1 in Screens window on left or by simply selecting control in app designer. In properties window on right, click on Data which will open Data Window

PC5

  • Data window will allow you to change data source, change layout for your gallery and update data fields in gallery. By default, layout would be Title-Sub Title-Body.
  • Click on layout to change it to Title-Sub Title. Select Title as Company name and Sub Title as website

PC6

  • In case you want combination of fields to be displayed in Title or Sub Title, For ex: instead of just website, you want to set Phone Number and Website both in Subtitle. Select SubTitle2 control in Screens window on left. Update value of Text property in formula bar as below:

ThisItem.cr2a5_website & ” – ” & ThisItem.cr2a5_phone

PC7

Detail Screen:

  • Select Detail Screen from Screens window
  • By default, Detail Screen layouts data fields in vertical fashion. Select Detail Form in Detail Screen and click on Layout in properties window. Change layout from vertical to horizontal

PC8

  • Choose fields to be shown on form from fields list. Reorder fields by simply drag up-down

PC9

  • Each field on form is a Data Card which is a control itself and building block of Detail & Edit Screen. A form represents one record and data card represents one column in record. By default, all Cards will be locked which means you cannot edit advanced properties or formula’s unless you unlock. To unlock Card, select a Card and click on Advanced tab in properties window. Click on lock button to unlock it

PC12

  • Once unlocked, properties will be unlocked and can be modified. Refer blog for more details on Data Card.

Edit Screen:

  • Select Edit Screen from Screens window
  • Select Edit Form in Edit Screen. Similarly Choose & Reorder fields to be shown on Edit form from Layout window as we did in Detail Screen

PC10

  • As red highlighted above, these are display types for each field automatically rendered based on column type in Company entity. For example: Company, Account, Phone, Website are rendered as Text fields (abc) and No of Products field is rendered as number (123).
  • You can expand display type option and change as required. Owner field by default renders as text field with GUID value. Expand display type for Owner and select Allowed Values option to display Owner as drop down instead of text field

PC11