Introduction:

When dealing with applications that manage large amounts of data, filling out forms with numerous fields and options can often be overwhelming for users. Cascading dropdowns in Model-Driven Apps offer an effective way to simplify this process. They allow users to select options in a specific order, with each choice narrowing down the available options for the next step. This not only makes data entry more efficient but also reduces the likelihood of errors by showing only the most relevant choices. By leveraging relationships between Dataverse tables, users are presented with options tailored to their previous selections. In this guide, we will walk you through the steps to set up cascading dropdowns in Model-Driven Apps.

Scenario:

Consider a scenario where you are building a student registration form, and users need to select their country, state, and city. When a user picks a country, only the states for that country should be shown. Then, once a state is chosen, the city dropdown should only display cities within that state. This approach reduces confusion and ensures users only see options that are relevant to their previous choices, making the process more streamlined and easier to follow.

To begin, you need to create the necessary Dataverse tables. Start by creating a Country table with a Country Name column of the Single Line of Text type. Populate this table with country names, such as the USA, Canada, and the UK.

Afterward, create another table called State, which should include two columns: a Country column (a lookup column pointing to the Country table) and a State Name column (a single line of text that contains the name of the state based on the selected country). Once you have set up the State table, input state data corresponding to each country (e.g., California for the USA, Ontario for Canada).

Next, create a City table. This table will have three columns: Country (lookup to the Country table), State (lookup to the State table), and City Name (a single line of text that contains the name of the city based on the selected state). Populate this table with cities associated with their respective states and countries (e.g., Los Angeles for California, Toronto for Ontario). Now, you have a structure in place where the relationships between Country, State, and City are ready for cascading functionality.

With the foundational tables set, it’s time to create the Main Table, where users will input their details. In this table, include fields for First Name, Last Name, Address, and Phone Number as Single Line of Text columns. Then, add lookup columns for Country, State, and City, each referencing their corresponding Dataverse tables.

To enable the cascading effect, you need to establish relationships between the Main Table and the Country, State, and City tables. To do this, navigate to the Main Table, select the Relationships section, and create Many-to-One relationships with the Country, State, and City tables. This will link the Main Table to the Country, State, and City tables, forming the basis for the dynamic filtering.

Once the relationships are set, go to the Main Form where users will input data. Select the State field, and in the properties pane on the right, configure the Filtering option. Set the State field to be filtered based on the selected Country and relationship. Repeat this process for the city field, ensuring that it filters based on the selected State. After configuring the filtering for the fields, save your changes and publish the app.

Now, when users fill out the form, selecting a country will automatically filter the options available for states, and selecting a state will filter the cities accordingly. This cascading functionality creates a seamless user experience by ensuring that each field displays only the relevant options based on prior selections.

Conclusion:

Cascading dropdowns in Model-Driven Apps make data entry easier by presenting relevant options based on previous choices, minimizing errors. This leads to more accurate data and smoother processes. Using Dataverse relationships improves the overall user experience and efficiency.

Information: A dynamic header allows important information to be displayed at the top, making it easier for users to view key details without navigating through different sections of the form.

Scenario: Let’s say you’re working on a Student Details form with multiple tabs. Each tab contains information such as Personal Details, Enrollment, Courses, and Grades. Instead of making users click through different tabs to access basic information, you can create a dynamic header that displays the student’s full name and course, visible at all times, enhancing the user experience.

Here are the steps to create a dynamic header for the modern-driven app:

Step 1: Go to Power Apps and navigate to the table used in the application. Create the columns you want to display in the application header in the column section.

Step 2: To display the student’s full name (combining the first and last names) in the header, a new column named “Full Name” was created, with the data type set to Formula. The Concatenate function was used in the formula to combine the first and last names: Concatenate (‘First Name’, ” “, ‘Last Name’).

Step 3: After creating the ‘Full Name’ column, drag and drop it into the header section of the app, then save and publish the form.

Step 4: Once the details are submitted, the full name will be displayed in the header section.

Step 5: To display another field in the header section, create a new column with the data type set to “Calculated.” In the formula, simply add the column name of the data you want to display in the header.

Step 6: After adding the details to that column, the data will be displayed in the header.

Conclusion: By leveraging formula columns and dynamic headers, users can access important information at a glance, enhancing both navigation and usability. This approach is particularly effective in forms with multiple sections or tabs, ensuring that key details remain visible without the need to switch between different parts of the form.

Summary:

Loading large datasets into Canvas PowerApps from a SharePoint List can be challenging due to PowerApps’ delegation limits and performance constraints. In this blog post, we explore effective techniques to efficiently handle and load over 2000 records. We’ll discuss the importance of optimizing your SharePoint list and using collections to manage data. Our approach focuses on loading data using collections to enhance performance and ensure a smoother user experience.

Step1:

Create a SharePoint list and use the default ‘Title’ column to add data. Populate the list with approximately 5,000 records.

Step2:

Create canvas PowerApps from app.powerapps.com.

Step3:

Add the SharePoint List as data source ‘Records List’.

Step4:

Add a ‘Vertical Gallery’ and insert two labels. Set the data source to SharePoint List. Set the values to ThisItem.Title and ThisItem.ID. Rename the headers in the gallery to ‘Title’ and ‘Index’.

Step5:

Add a label to display the number of records loaded in the app.

Code:

“Total Number of Records: ” & CountRows(Gallery1.AllItems)

Step6:

Create an additional screen to handle redirection, set the collection, and load data into it. This logic can be implemented in various places within the app, such as the App.OnStart event, a Button click event, or the Screen Visible property. In this case, we will write the logic in the Screen Visible property so that it executes automatically during screen transitions.

• Currently, we have approximately 5000 records in our SharePoint list, and the PowerApps “Data row limit” is set to 2000 records. Therefore, the total number of records in the SharePoint list (5000) divided by the data row limit (2000) equals approximately 2.5, which rounds up to 3. Based on this, our logic involves looping through 3 iterations to insert records into the “colRecords” collection.

Code: Clear(colRecords);ForAll(Sequence(Round(First(Sort(‘Records List’,Index,SortOrder.Descending)).Index/2000,0),1,1),With({_firstID:(ThisRecord.Value-1)*2000,_lastID:ThisRecord.Value*2000},Collect(colRecords,Filter(‘Records List’,Index>_firstID&&Index<=_lastID))))

Step7:

Change the data source name in the Gallery “Items” property to the collection name “colRecords”.

Step8:

Now, switch from Screen1 to Screen2 and check the “Total Number of Records” display; it should show a total of 5000 records.

Step9:

Now you can use the items from this collection throughout the application.

Conclusion:

In conclusion, efficiently loading over 2000 records in Canvas PowerApps from a SharePoint List requires a strategic approach. By optimizing the SharePoint list and leveraging collections, you can work within PowerApps’ delegation limits while ensuring a smoother user experience. The outlined steps, from setting up the canvas and gallery to implementing mathematical logic for data retrieval, enable you to manage large datasets effectively. By breaking down the data into manageable chunks and utilizing collections, you enhance performance and responsiveness, ultimately delivering a more efficient application for users.

Summary:

• In today’s digital landscape, the demand for offline-capable applications is skyrocketing. With the prevalence of mobile devices and the need for seamless user experiences, mastering the art of developing offline-capable Canvas PowerApps for both Windows and mobile platforms is crucial for staying ahead in the game.

Leveraging Canvas PowerApps for Offline Functionality

• Canvas PowerApps, with their flexibility and versatility, provide the perfect platform for building offline-capable applications. By leveraging features like local data storage and offline data synchronization, developers can create robust solutions that deliver a seamless user experience regardless of network availability.

Creating Application

1. Open the Browser and pate the URL: https://make.powerapps.com/.
2. Click “Apps” in the left panel.
3. Click on the “New app”.

   

4. Choose the Blank Canvas app and enter the app’s name as it appears in the image below:

   

5. Once the app is created. Connect to the SharePoint list as data source as we will store the data in SharePoint list. In this example we will utilize the Events list with columns mentioned in below Power Apps UI. Now, create the similar UI in Power Apps.

   

6. If data submission without form control is required, utilize the Patch function to update records effectively.
7. Prior to integrating the Patch function, establish a connection to the SharePoint list as the data source, ensuring it is properly configured.
8. Navigate to the data Source icon, search for the SharePoint connector, and designate the site where your list is configured.

   

9. After successfully establishing the connection to the data source, it will appear on the left side of the interface. Next, incorporate the Patch function into the button’s “on Select” event, as illustrated in the image below.

   

10. Since the Patch function may have limitations, it works only when the network connection is available, consider utilizing Power Apps Collection functionality to store data temporarily. This enables efficient management and manipulation of data within the application.
11. Power Apps offers a useful function called Connection. Leveraging this function, we have implemented logic: if the connection is available, we utilize the Patch function; otherwise, we store the data in a collection and save the file locally on the device.
12. In Power Apps, to verify the availability of the connection, incorporate an if condition to check if the connection is accessible, as demonstrated in the image below.

    

    Code:

    If (

    Connection.Connected,

    Patch (

    ‘Offline Event  Register List’,

    Defaults(‘Offline Event  Register List’),

    {

    Name: Txtinput_Name.Text,

    ‘Team Name’: txt_TeamName.Text,

    Email: txt_Email.Text,

    Phone: Value(txt_Phone.Text),

    ‘Total Seats’: Value(txt_totalseats.Text)

    }

    );

    Notify (“The Event has been Submitted successfully…”);

    Navigate (

    SuccessScreen,

    ScreenTransition.Cover

    ),

    Collect (

    colofflineeventregisterlist,

    {

    Name: Txtinput_Name.Text,

    ‘Team Name’: txt_TeamName.Text,

    Email: txt_Email.Text,

    Phone: Value(txt_Phone.Text),

    ‘Total Seats’: Value(txt_totalseats.Text)

    }

    );

    SaveData (

    colofflineeventregisterlist,

    “Eventregisterdata”

    );

    Notify (“The Event has been Submitted successfully.”),

    Navigate (

    SuccessScreen,

    ScreenTransition.Cover

    )

    )

13. Now, let us incorporate a new Scrollable Screen and integrate a Gallery into the DataCard, as shown in the image below.

    

14. Certainly! You can integrate the same code into the “OnVisible” property of the home screen to check the network connectivity status and adjust the functionality accordingly. Here is how you can do it:

    

    Code:

    If (

    //——————————-Online Code————–

    Connection.Connected,

    ClearCollect ( colofflineeventregisterlist,

    ‘Offline Event  Register List’

    );

    SaveData (

    colofflineeventregisterlist,

    “Eventregisterdata”

    ),

    //——————————Offline Code———–

    Clear(colofflineeventregisterlist);

    LoadData (

    colofflineeventregisterlist,

    “Eventregisterdata”

    )

    )

15. It sounds like you are encountering an error message stating, “There was a problem saving your data. Data cannot be saved when running in a web browser.” This message typically occurs when attempting to save data locally in a web browser environment, which is restricted due to security reasons.
16. However, if your app is functioning correctly despite this message, you can safely ignore it. Power Apps sometimes display this message even when data saving is not the main concern or when it is working as intended. Just ensure that your app’s functionality is not affected, and users can continue using it without any issues. If needed, you can provide a brief explanation to users about this message to alleviate any concerns.
17. When the app detects that it is in offline mode, users can be informed that their data is being saved locally. When the app goes online, users can click on the Sync icon to synchronize all locally saved items with the SharePoint list. Here is a general approach:

    

18. To change the color of the Circle icon based on the network status (online or offline), you can adjust its fill property dynamically in Power Apps. Here is how you can implement this:
    • Define Online and Offline Colors: Define the colors you want to use for representing online (green) and offline (gray) statuses.
    • Update Circle Icon Fill Property: Update the fill property of the Circle icon based on the network status. You can use the If function to conditionally set the fill color.

      Here is a sample code snippet:
      Fill: If (Connection.Connected,RGBA(152,208,70,1),RGBA(149,149,149,1))

      

      

19. Now that the app is configured to function offline, you can proceed to install the Power App on your preferred device, whether it is a mobile device or a Windows device.
20. After installing the Power Apps application, ensure that you use the correct email address with which the app was shared. This ensures seamless access to the app and its functionalities tailored to your account.
21. If you have added new entries to the app while offline, those entries will be stored locally but will not be immediately added to the SharePoint list since the app is offline. However, once the app reconnects to the network, you can implement a synchronization mechanism to upload the locally stored entries to the SharePoint list.

    Here is a general approach to achieve this:

    • Local Storage: When the app is offline and new entries are added, they should be stored locally using mechanisms like Power Apps Collections or SaveData function.
    • Sync Functionality: Implement a Sync button or mechanism that checks for network connectivity. When the app comes online, this mechanism should synchronize the locally stored entries with the SharePoint list using functions like Patch or Collect.

      

    • Here is a SharePoint List snapshot as shown in the below image.

      

22. Now We are Connected the app with Network then it is shown the screen as show into the below image.

    

23. Now the We click on the Sync Button and check the again the data is insert into our SharePoint list or not.
24. After clicking on the Sync button, you will want to verify whether the data has been successfully inserted into your SharePoint list. Here is how you can do it:
    • Sync Button Functionality: Ensure that the Sync button triggers the synchronization process, where locally stored data is uploaded to the SharePoint list.
    • Notification or Confirmation: Provide a notification or confirmation message to indicate that the synchronization process has been initiated.
    • Check SharePoint List: After the synchronization process is complete, manually check your SharePoint list to confirm whether the new data entries have been inserted successfully.

      

The out-of-the-box people picker in Modern Power Apps Form currently doesn’t work properly with Power Apps modern controls. Therefore, the workaround is to use Microsoft 365 users with the Modern Control form.

First need to create a SharePoint list with the following types of columns:

• Name: Single line of text
• Department: Choice
• Manager: People picker

Step 1: Go to Power Apps and create an app. In the app, add a modern form to the screen. Ensure modern controls are enabled from the Power Apps settings. To enable them, navigate to Settings, then General, and enable ‘Modern Controls and Themes’.

Step 2: After enabling it, click on ‘Insert’ and add a modern view form.

Step 3: After adding the form, select the data source. Choose the site, and then select the list. Once the list is selected, the columns will appear in the form.

Step 4: In the Manager column, first select the data card where you want to display the information. Then, click on the fields edit button.

Step 5: Click on ‘Add Field’ and select which property you need to show in the dropdown.

Step 6: Now, run the app. In the column, you will see a limited list of users that you can select, not all from the tenant users.

Step 7: To get all the users from the tenant, you need to add the Office 365 User data source in Power Apps.

Step 8: After that, go to the data card, click on the item property, and add

Office365Users.SearchUser({searchTerm:””,top:999})

Step 9: After adding that, you should now see all users from the tenant.

Step 10: To get the people picker value in the list, add this code to the data card’s Update property.

{

‘@odata.type’: “#Microsoft.Azure.Connectors.SharePoint.SPListExpandedUser”,

Claims: “i:0#.f|membership|”&DataCardValue4.Selected.Mail,

Department: “”,

DisplayName: DataCardValue4.Selected.DisplayName,

Email: DataCardValue4.Selected.Mail,

JobTitle: “”,

Picture: “”

}

Step 11: After completing all the steps, run the app and submit the data.

Conclusion:

Integrating all Microsoft 365 users with the modern people picker in Power Apps simplifies how data is managed in SharePoint lists. Users can easily select and submit data by setting up modern forms, adjusting settings, and adding the Office 365 User data source, ensuring smooth operations across the platform.