You possibly can examine these two bulletins within the Microsoft Energy Apps blogs or by clicking on the hyperlinks under:
https://powerapps.microsoft.com/en-us/blog/announcing-command-designer-with-power-fx-preview/
Now, let’s go forward and overview every considered one of these individually.
Customized Pages:
Let’s begin with Customized pages. Customized pages can be utilized inside our model-driven apps wherever the place all pages are supported. This implies the primary space of the appliance, dialogs or the brand new app aspect pane. It permits the flexibility to have performance that isn’t achievable utilizing the usual options of model-driven apps, however will be achieved utilizing canvas apps.
Customized pages will be opened from the positioning map for ease of entry or from current model-driven app logic utilizing the Consumer Api. Customized pages also can open different customized pages or model-driven app pages. They provide us the flexibility to creator pages which are too complicated to attain throughout the current mannequin pages.
After we create a brand new app we will now simply add customized pages and benefit from Canvas Authoring.
There are a number of methods to begin with customized pages, however let’s go forward and begin by creating a brand new app.
Very first thing, let’s navigate to the maker portal, in order that we will begin creating the brand new app. As of the time of scripting this weblog put up, we would want to entry this by going to the preview maker portal at https://make.preview.powerapps.com.
To begin creating the brand new app, click on on the “+ New app” command bar button and choose Mannequin-driven from the drop down menu.
This may pop up the create mannequin pushed app from clean window, the place we will choose to make use of the Fashionable app designer (preview) or the Traditional app designer. To begin with the Fashionable app designer, choose that alternative, and click on Create.
Subsequent we might want to give the app a reputation, and an optionally available description, and click on on the Create button.
After a number of seconds the brand new app will likely be created, and we will begin including pages. There are three various kinds of pages that may be created, these are desk primarily based view and type, dashboard and customized (which is presently in preview). The animated picture under exhibits you the three choices.
We are going to begin by choosing the desk sort, as soon as chosen you’ll have the choice to pick the suitable desk or tables that you just need to add to your app, and with an choice so as to add these pages to your website map as effectively.
Once you click on on the add button, it is possible for you to to see a preview of your app immediately from the designer window, mainly a preview of what you app would appear like. The picture under exhibits you the preview window. You’ll discover that the middle space is the preview, and on the left hand aspect we see the tables that had been added to the app.
The preview space, not solely exhibits you the best way the app seems to be, however permits you to change the format so that you just see how the app will look in responsive design for various gadgets.
Additionally, you will discover the part to the left that’s expanded to point out the info tables, which incorporates hyperlinks to the pages and navigation. This primary hyperlink exhibits you the tables, dashboards and customized pages that make up your app, whereas the second hyperlink exhibits you the positioning map. These had been coated in further element in a earlier weblog put up.
Let’s go forward and add a customized web page. Below the pages left hand navigation space (or from the command bar), click on on Add web page, and choose the Customized (preview) choice. As soon as chosen you’ll have the choice to create a brand new customized web page or use an current customized web page that was beforehand created. In our case, since we don’t have an current customized web page, we’ll Create a brand new customized web page and provides it a reputation.
As soon as we enter a reputation, it will open a brand new designer, and we will begin engaged on the brand new app. I’ve added to the app a few galleries and instructions in order that we will see how this seems to be and works in our model-driven app. The picture under exhibits the app that we created. As soon as you might be glad with the app, click on on the Save button after which publish it.
Shut the customized web page, after which go forward and Save and Publish the Mannequin-driven app that you just created. The animated picture under exhibits the top results of the customized web page contained in the model-driven app.
To learn to navigate between your Canvas app and the model-driven app, you’ll be able to learn extra about it within the following Microsoft Docs web page : https://docs.microsoft.com/en-us/powerapps/maker/model-driven-apps/page-powerfx-in-model-app
Customized pages will also be out there by calling them from JavaScript throughout the Mannequin Pushed App through the use of the Xrm.Navigation.navigateTo perform and offering a web page sort “customized”, and offering the title of the customized web page (canvas app). You possibly can then open the customized web page inline or as a centered dialog. The next Microsoft Docs web page contains samples on easy methods to open this web page: https://docs.microsoft.com/en-us/powerapps/developer/model-driven-apps/clientapi/navigate-to-custom-page-examples
Command Bars utilizing Energy FX:
Subsequent, we’ll check out utilizing Command Bars. We are going to use the identical app that we already created, and add a command bar button that may use Energy FX to point out/cover the button in addition to a customized perform that may execute on the press of the button.
With the intention to begin utilizing the brand new Command performance, we first want navigate to the web page (desk on this case) that we need to work with, and choose the Edit command bar (preview) choice by clicking on the extra choices to the precise of the desk title and choosing that choice as proven within the picture under. This needs to be achieved from the Pages navigation pane.
This may pop up a dialog the place now we have to pick what command bar we wish to customise. There are 4 out there choices to pick which embrace the Principal grid, Principal type, Subgrid view and Related view. The picture under exhibits these choices.
Let’s go forward and choose Principal type. When the Instructions web page open, we’ll see a view that incorporates all the current command bar buttons which are out there for the desk throughout the Principal type. At this cut-off date (as that is nonetheless in preview, and we don’t know the precise timeline of launch), modifying the present buttons shouldn’t be presently supported, so any customizations that’s wanted for this, should be completed utilizing Ribbon Workbench. The picture under exhibits you the Principal type Command Bar earlier than now we have added any further buttons.
Now let’s go forward and create a brand new command. We are going to create a easy command that is named Calculate Credit score Restrict which when clicked will a number of the variety of staff within the firm by 10,000, and can set it to solely be seen when the variety of staff incorporates information.
To begin creating a brand new command, we click on on the brand new Command button on the highest of the left navigation pane.
As soon as we click on on the brand new command button, we’ll see {that a} has been created. We will transfer the command (utilizing drag and drop) throughout the Principal type to position it within the applicable location, nevertheless this may solely be completed for brand spanking new instructions, and never the present ones. Let’s present the brand new command among the properties, such because the Label, Icon to make use of and the Tooltip textual content.
Subsequent, we wish to set the features for the Motion that will likely be carried out when the button is clicked in addition to the Visibility of the button. On the precise Command Pane, the final two choices are Motion and Visibility. The Motion choice has two choices: Run system and Run JavaScript.
If we use the Run JavaScript choice we will present the title of the library and the title of the perform to name when the button is clicked. That is extra of a legacy sort of motion which is likely to be used sooner or later for enabling the legacy buttons. The Run system permits us to Run Energy FX code when the command is clicked.
We will use the Patch perform along with the Self.Chosen.Merchandise collectively with a purpose to replace the Credit score Restrict, after which examine the Variety of Workers to Clean to regulate the visibility of the button. I’m nonetheless working a number of glitches as to what’s working and what’s not on the subject of Energy FX for commanding, however the code under is working correctly.
On Choose:
Set(TotalCredit, Self.Chosen.Merchandise.’Variety of Workers’ * 10000);
Patch(Accounts, Self.Chosen.Merchandise, {‘Credit score Restrict’: TotalCredit});
Seen:
Self.Chosen.Merchandise.’Variety of Workers’ Clean()
The next Microsoft Docs web page gives some samples on utilizing Energy Fx for instructions within the Mannequin pushed apps: https://docs.microsoft.com/en-us/powerapps/maker/model-driven-apps/commanding-use-powerfx
Now, let’s have a look at the top consequence after including the button and publishing the app instructions.
I hope that this weblog put up/article supplied you with some insights as to what’s coming within the new future.
