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
- 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.
- 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
- Select Home menu and click on Theme. Choose any theme
Change Layout & Update Data Fields:
- 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
- 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
- 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
- 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
- Choose fields to be shown on form from fields list. Reorder fields by simply drag up-down
- 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
- Once unlocked, properties will be unlocked and can be modified. Refer blog for more details on Data Card.
- 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
- 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