{"id":10500,"date":"2021-05-19T11:11:59","date_gmt":"2021-05-19T09:11:59","guid":{"rendered":"https:\/\/sii.pl\/blog\/?p=10500"},"modified":"2023-10-25T11:10:36","modified_gmt":"2023-10-25T09:10:36","slug":"introduction-to-power-portal-web-api","status":"publish","type":"post","link":"https:\/\/sii.pl\/blog\/en\/introduction-to-power-portal-web-api\/","title":{"rendered":"Introduction to Power Portal Web API"},"content":{"rendered":"\n<p>Power Portal provides an easy way to display data to external customers. They can log in using their Azure AD B2C, Facebook, Google or Microsoft accounts and it is also possible to display data anonymously for everyone. Most solutions are designed to be low-code for showing or performing operations on the Dataverse.&nbsp;<\/p>\n\n\n\n<p>Microsoft decided to make life easier for developers and provided a Web API for Power Portal. Usually, such an interface allows you to create CRUD (Create, Read, Update, Delete) operations. In this case, however, we have only available &#8216;create&#8217;, &#8216;update&#8217;, &#8216;delete records from the table&#8217; and &#8216;create or delete relationships between records&#8217;.<\/p>\n\n\n\n<p>The problem with reading from the database interferes with work, if not prevents it. To solve this problem you can create Web API with the use of FetchXML and Web Template. I will write another article about this.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Site Settings<\/h2>\n\n\n\n<p>To enable WebApi, make the following entries in the <strong>Site Settings <\/strong>table:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td>Name<\/td><td>Value<\/td><\/tr><tr><td>Webapi\/contact\/enabled<\/td><td>true<\/td><\/tr><tr><td>Webapi\/contact\/fields<\/td><td>address1_telephone1<\/td><\/tr><tr><td>Webapi\/error\/innererror<\/td><td>true<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Webapi\/contact\/enabled \u2013 enables the Web API for the Contact table.<\/li>\n\n\n\n<li>Webapi\/contact\/fields \u2013 here you should list all the fields you want to modify.<\/li>\n\n\n\n<li>Webapi\/error\/innererror \u2013 enables internal error forwarding to the Web API.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Permission settings<\/h2>\n\n\n\n<p>Setting permissions allows you to restrict or grant access to operations to a group of users. We add an entry to the Entity Permissions settings:<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/05\/contact-entity-permission.png\"><img decoding=\"async\" width=\"1438\" height=\"614\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/05\/contact-entity-permission.png\" alt=\"Contact Entity Permission\" class=\"wp-image-10506\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/05\/contact-entity-permission.png 1438w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/05\/contact-entity-permission-300x128.png 300w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/05\/contact-entity-permission-1024x437.png 1024w\" sizes=\"(max-width: 1438px) 100vw, 1438px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Entity Name&nbsp;\u2013 select the table that you want to grant permissions to (<strong>Contact)<\/strong>.<\/li>\n\n\n\n<li>Scope \u2013 we have a choice of: Global, Account, Contact, Self, Parent, we select <strong>Global<\/strong>. More about scopes you can read in the official documentation <a href=\"https:\/\/docs.microsoft.com\/en-us\/powerapps\/maker\/portals\/configure\/assign-entity-permissions\" rel=\"nofollow\" >Configure security using table permissions &#8211; Power Apps | Microsoft Docs<\/a>.<\/li>\n\n\n\n<li>Priviliges \u2013 we mark the operations that users will be able to do.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/10\/web-api-user.png\"><img decoding=\"async\" width=\"387\" height=\"432\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/10\/web-api-user.png\" alt=\"Web API User - General\" class=\"wp-image-25221\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/10\/web-api-user.png 387w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2023\/10\/web-api-user-269x300.png 269w\" sizes=\"(max-width: 387px) 100vw, 387px\" \/><\/a><\/figure>\n\n\n\n<p>The next step is to create a Web Role in the Web Roles table and we call it Web API User<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Authenticated Users Role \u2013 set to &#8216;Yes&#8217; allows logged-in users to invoke operations on the Web API.<\/li>\n\n\n\n<li>Anonymous Users Role \u2013 set to &#8216;No&#8217; to block access for unknown users.<\/li>\n<\/ul>\n\n\n\n<p>The final step is to go to the Entity Permissions tab of the Web Role and add the Contact Entity Permission record you created earlier.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" width=\"523\" height=\"295\" src=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/05\/entity-permission-related.png\" alt=\"Web API User - Entity Permissions\" class=\"wp-image-10508\" srcset=\"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/05\/entity-permission-related.png 523w, https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/05\/entity-permission-related-300x169.png 300w\" sizes=\"(max-width: 523px) 100vw, 523px\" \/><\/figure>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">The code<\/h2>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nlet token = await shell.getTokenDeferred();\n \nawait fetch(`\/_api\/contacts(53bf9109-9c00-46b9-b99c-0eb5f986c97a)`, {\nmethod: 'PATCH',\nheaders: {\nAccept: 'application\/json',\n'Content-Type': 'application\/json',\n__RequestVerificationToken: token,\n},\nbody: JSON.stringify({\naddress1_telephone1: '555-555'\n})\n});\n<\/pre><\/div>\n\n\n<p>The code above is an example of updating data on a specific record in the Contact table. In the first line, we call the getTokenDeferred method, which will return a unique token for us to authenticate to the system. On the next line, we invoke the Web API, using the schema: \/_api\/tablename(record guid), using the PATCH method. The additional header __RequestVerificationToken stores the token retrieved earlier. In the body, we enter our object in schema: fieldname: &#8216;value&#8217; and then change it to a string.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Assigning a reference to a record<\/h2>\n\n\n\n<p>The example of adding a file shows how you can create a link to an already created record in the Contact table. First, we need to create the rights for the Annotation (Note) table in Entity Permissions (select Create, Append To) and the entries in Site Settings as for Contact, adding the filename, mimetype, documentbody, and objectid_contact fields. For the Contact table permissions, we must additionally check Append.<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\nlet token = await shell.getTokenDeferred();\n \nawait fetch(`\/_api\/annotations`, {\nmethod: 'POST',\nheaders: {\nAccept: 'application\/json',\n'Content-Type': 'application\/json',\n__RequestVerificationToken: token,\n},\nbody: JSON.stringify({\nfilename: fileName,\nmimetype: mimetype,\ndocumentbody: base64Content,\n'objectid_contact@odata.bind': `\/contacts(53bf9109-9c00-46b9-b99c-0eb5f986c97a)`,\n})\n});\n<\/pre><\/div>\n\n\n<p>In the example above, in line #14, a bind to the Contact table is created on the objectid field. Adding @odata.bind to the field name lets us know that it is a reference to another record. You can add and remove relationships to other records in this way.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Summary<\/h2>\n\n\n\n<p>Using the Web API in Power Portal can replace the creation of an Entity Form. This can help you build a more enhanced form and complex business logic. It is possible to build a form view entirely from scratch if this is required by our design approach and requirements from a client, who wants to create a very unusual form. Currently, some of the Plugin&#8217;s actions cannot be used, e.g. PreValidation and PreOperation actions are not supported, what is the disadvantage of using this solution.<\/p>\n\n\n<div class=\"kk-star-ratings kksr-auto kksr-align-left kksr-valign-bottom\"\n    data-payload='{&quot;align&quot;:&quot;left&quot;,&quot;id&quot;:&quot;10500&quot;,&quot;slug&quot;:&quot;default&quot;,&quot;valign&quot;:&quot;bottom&quot;,&quot;ignore&quot;:&quot;&quot;,&quot;reference&quot;:&quot;auto&quot;,&quot;class&quot;:&quot;&quot;,&quot;count&quot;:&quot;5&quot;,&quot;legendonly&quot;:&quot;&quot;,&quot;readonly&quot;:&quot;&quot;,&quot;score&quot;:&quot;5&quot;,&quot;starsonly&quot;:&quot;&quot;,&quot;best&quot;:&quot;5&quot;,&quot;gap&quot;:&quot;11&quot;,&quot;greet&quot;:&quot;&quot;,&quot;legend&quot;:&quot;5\\\/5 ( votes: 5)&quot;,&quot;size&quot;:&quot;18&quot;,&quot;title&quot;:&quot;Introduction to Power Portal Web API&quot;,&quot;width&quot;:&quot;139.5&quot;,&quot;_legend&quot;:&quot;{score}\\\/{best} ( {votes}: {count})&quot;,&quot;font_factor&quot;:&quot;1.25&quot;}'>\n            \n<div class=\"kksr-stars\">\n    \n<div class=\"kksr-stars-inactive\">\n            <div class=\"kksr-star\" data-star=\"1\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"2\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"3\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"4\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" data-star=\"5\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n    \n<div class=\"kksr-stars-active\" style=\"width: 139.5px;\">\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n            <div class=\"kksr-star\" style=\"padding-right: 11px\">\n            \n\n<div class=\"kksr-icon\" style=\"width: 18px; height: 18px;\"><\/div>\n        <\/div>\n    <\/div>\n<\/div>\n                \n\n<div class=\"kksr-legend\" style=\"font-size: 14.4px;\">\n            5\/5 ( votes: 5)    <\/div>\n    <\/div>\n","protected":false},"excerpt":{"rendered":"<p>Power Portal provides an easy way to display data to external customers. They can log in using their Azure AD &hellip; <a class=\"continued-btn\" href=\"https:\/\/sii.pl\/blog\/en\/introduction-to-power-portal-web-api\/\">Continued<\/a><\/p>\n","protected":false},"author":241,"featured_media":10535,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_editorskit_title_hidden":false,"_editorskit_reading_time":0,"_editorskit_is_block_options_detached":false,"_editorskit_block_options_position":"{}","inline_featured_image":false,"footnotes":""},"categories":[1320],"tags":[],"class_list":["post-10500","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-hard-development"],"acf":[],"aioseo_notices":[],"republish_history":[],"featured_media_url":"https:\/\/sii.pl\/blog\/wp-content\/uploads\/2021\/05\/power-APPS.png","category_names":["Hard development"],"_links":{"self":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts\/10500"}],"collection":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/users\/241"}],"replies":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/comments?post=10500"}],"version-history":[{"count":2,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts\/10500\/revisions"}],"predecessor-version":[{"id":25223,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/posts\/10500\/revisions\/25223"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/media\/10535"}],"wp:attachment":[{"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/media?parent=10500"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/categories?post=10500"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sii.pl\/blog\/en\/wp-json\/wp\/v2\/tags?post=10500"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}