Útmutató: Portálok webes API-jának használata

Ebben az útmutatóban egy weblapot és egy egyéni webes sablont fog létrehozni, amely a webes API segítségével olvassa el, írja meg, frissíti és törli a rekordokat a kapcsolattartói táblából.

1. lépés Oldal beállításainak létrehozása

A Portálok webes API használata előtt engedélyeznie kell a szükséges webhelybeállításokat a Portal Management alkalmazással. A webhely beállításai attól függnek, hogy milyen táblát szeretne használni a webes API-val való kommunikáció során.

1. Indítsa el a Portálfelügyelet alkalmazást.

2. A Portal Management alkalmazás bal oldali panelén válassza a Webhelybeállítások lehetőséget.

   

3. Válassza az Új lehetőséget.

4. A Név mezőben adja meg a Webapi/contact/enabled értéket.

5. A Webhely listában válassza ki a webhely rekordját.

6. Az Érték mezőbe írja be a true értéket.

   

7. Válassza a Mentés és bezárás lehetőséget.

8. Válassza az Új lehetőséget.

9. A Név mezőben adja meg a Webapi/contact/fields értéket.

10. A Webhely listában válassza ki a webhely rekordját.

11. Az Érték mezőbe írja be a következőt:
    keresztnév,vezetéknév,teljes név,emailcím1,telefon1

    

12. Válassza a Mentés és bezárás lehetőséget.

13. Válassza az Új lehetőséget.

14. A Név mezőben adja meg a Webapi/error/innererror értéket.

    

15. A Webhely listában válassza ki a webhely rekordját.

16. Az Érték mezőbe írja be a true értéket.

17. Válassza a Mentés és bezárás lehetőséget.

18. Ellenőrizze a Webes API webhelybeállításait.

2. lépés Engedélyek konfigurálása

Az engedélyeket úgy kell beállítania, hogy a felhasználók használni tudják a webes API funkciót. Ebben a példában beállít vagy létrehoz egy új webes szerepkört, amely a webes API-t fogja használni, ezután hozzáadja a Kapcsolattartó tábla engedélyeit és hozzárendeli a webes szerepkört a táblaengedélyhez, majd végül webes szerepkört ad hozzá a felhasználókhoz, hogy használhassák a webes API-t.

Webes szerepkör létrehozása

Ha jelenleg nincs olyan webes szerepköre, amely a webes API-n keresztül elérhető táblához rendelkezik jogosultsággal, vagy az adatok elérésének más környezetére van szüksége, a következő lépésekből tud új webes szerepkört létrehozni, illetve táblaengedélyeket hozzárendelni.

1. Indítsa el a Portálfelügyelet alkalmazást.

2. A bal oldali ablaktáblában, a Biztonság szakaszban válassza a Webes szerepkörök lehetőséget.

3. Válassza az Új lehetőséget.

4. A Név mezőbe írjabe a Webes API-felhasználó nevet (vagy bármilyen nevet, amely a leginkább tükrözi azt a szerepkört, hogy a felhasználó hozzáfér ehhez a funkcióhoz).

5. A Webhely listában válassza ki a webhely rekordját.

   

6. Válassza a Mentés parancsot.

Táblaengedélyek létrehozása

1. Indítsa el a Power Pagestervezőstúdiót.

2. Válassza a Biztonság lapot.

3. A bal oldali ablaktáblán a Biztonság menüpontban válassza a Táblaengedélyek lehetőséget.

4. Válassza az Új engedély lehetőséget.

5. A Név mezőben adja meg a Kapcsolattartó táblaengedély értéket.

6. Válassza a Tábla neve listában a Kapcsolattartó (kapcsolattartó) lehetőséget.

7. Az Elérési típus listájában válassza a Globális lehetőséget.

8. Válassza ki az Olvasás, Írás, Létrehozás és Törlés jogosultságokat.

9. Válassza a+ Szerepkörök hozzáadása lehetőséget, és jelölje ki a korábban kiválasztott vagy létrehozott webes szerepkört.

10. Válassza a Mentés és bezárás lehetőséget.

    

Kapcsolattartók felvétele a webes szerepkörbe

1. Indítsa el a Portálfelügyelet alkalmazást.

2. A bal oldali ablaktáblában, a Biztonság szakaszban válassza a Kapcsolattartók lehetőséget.

3. Válassza ki, hogy ebben a példában melyik kapcsolattartót szeretné használni a webes API-hoz.

   Feljegyzés

   Ez a kapcsolattartó a jelen példában a webes API tesztelésére használt felhasználói fiók. Ügyeljen rá, hogy a megfelelő kapcsolattartót válassza ki a portálon.

4. Válassza a Kapcsolódó>Webes szerepkörök lehetőséget.

   

5. Válassza a Meglévő webes szerepkör hozzáadása lehetőséget.

6. Válassza ki a korábban létrehozott Webes API felhasználója szerepkört.

7. Válassza a Hozzáadás lehetőséget.

   

8. Válassza a Mentés és bezárás lehetőséget.

3. lépés Weboldal létrehozása

Miután engedélyezte a webes API-t és konfigurálta a felhasználói engedélyeket, hozzon létre egy, a rekordok megtekintésére, módosítására, létrehozására és törlésére szolgáló weboldalt a mintakóddal.

1. Indítsa el a Power Pagestervezőstúdiót.

2. Az Oldalak munkaterületen válassza a + Oldal lehetőséget.

3. Az Oldal hozzáadása párbeszédpanelben.

4. Írja be a Név mezőbe a WebAPI nevet, és válassza a Létrehozás üresből elrendezést.

5. Válassza a Hozzáadás lehetőséget.

6. Válassza a Kód szerkesztése beállítást a jobb felső sarokban.

7. Válassza a Visual Studio Code megnyitása lehetőséget.

8. Másolja az alábbi mintakódrészletet, és illessze be az oldalszakasz <div></div> címkéi közé.

       <!-- Sample code for Web API demonstration -->
   <style>
       #processingMsg {
           width: 150px;
           text-align: center;
           padding: 6px 10px;
           z-index: 9999;
           top: 0;
           left: 40%;
           position: fixed;
           -webkit-border-radius: 0 0 2px 2px;
           border-radius: 0 0 2px 2px;
           -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
           box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
           display: none;
       }
   
       table td[data-attribute] .glyphicon-pencil {
           margin-left: 5px;
           opacity: 0;
       }
   
       table td[data-attribute]:hover .glyphicon-pencil {
           opacity: 0.7;
       }
   </style>
   
   <script>
     $(function() {
       //Web API ajax wrapper
       (function(webapi, $) {
         function safeAjax(ajaxOptions) {
           var deferredAjax = $.Deferred();
           shell.getTokenDeferred().done(function(token) {
             // Add headers for ajax
             if (!ajaxOptions.headers) {
               $.extend(ajaxOptions, {
                 headers: {
                   "__RequestVerificationToken": token
                 }
               });
             } else {
               ajaxOptions.headers["__RequestVerificationToken"] = token;
             }
             $.ajax(ajaxOptions)
               .done(function(data, textStatus, jqXHR) {
                 validateLoginSession(data, textStatus, jqXHR, deferredAjax.resolve);
               }).fail(deferredAjax.reject); //ajax
           }).fail(function() {
             deferredAjax.rejectWith(this, arguments); // On token failure pass the token ajax and args
           });
           return deferredAjax.promise();
         }
         webapi.safeAjax = safeAjax;
       })(window.webapi = window.webapi || {}, jQuery)
       // Notification component
       var notificationMsg = (function() {
         var $processingMsgEl = $('#processingMsg'),
           _msg = 'Processing...',
           _stack = 0,
           _endTimeout;
         return {
           show: function(msg) {
             $processingMsgEl.text(msg || _msg);
             if (_stack === 0) {
               clearTimeout(_endTimeout);
               $processingMsgEl.show();
             }
             _stack++;
           },
           hide: function() {
             _stack--;
             if (_stack <= 0) {
               _stack = 0;
               clearTimeout(_endTimeout);
               _endTimeout = setTimeout(function() {
                 $processingMsgEl.hide();
               }, 500);
             }
           }
         }
       })();
       // Inline editable table component
       var webAPIExampleTable = (function() {
         var trTpl = '<% _.forEach(data, function(data){ %>' +
           '<tr data-id="<%=data.id%>" data-name="<%=data.fullname%>">' +
           '<% _.forEach(columns, function(col){ %>' +
           '<td data-attribute="<%=col.name%>" data-label="<%=col.label%>" data-value="<%=data[col.name]%>">' +
           '<%-data[col.name]%><i class="glyphicon glyphicon-pencil"></i>' +
           '</td>' +
           '<% }) %>' +
           '<td>' +
           '<button class="btn btn-default delete" type="submit"><i class="glyphicon glyphicon-trash" aria-hidden="true"></i></button>' +
           '</td>' +
           '</tr>' +
           '<% }) %>';
         var tableTpl = '<table class="table table-hover">' +
           '<thead>' +
           '<tr>' +
           '<% _.forEach(columns, function(col){ %>' +
           '<th><%=col.label%></th>' +
           '<% }) %>' +
           '<th>' +
           '<button class="btn btn-default add" type="submit">' +
           '<i class="glyphicon glyphicon-plus" aria-hidden="true"></i> Add Sample Record' +
           '</button>' +
           '</th>' +
           '</tr>' +
           '</thead>' +
           '<tbody>' + trTpl + '</tbody>' +
           '</table>';
         function getDataObject(rowEl) {
           var $rowEl = $(rowEl),
             attrObj = {
               id: $rowEl.attr('data-id'),
               name: $rowEl.attr('data-name')
             };
           $rowEl.find('td').each(function(i, el) {
             var $el = $(el),
               key = $el.attr('data-attribute');
             if (key) {
               attrObj[key] = $el.attr('data-value');
             }
           })
           return attrObj;
         }
         function bindRowEvents(tr, config) {
           var $row = $(tr),
             $deleteButton = $row.find('button.delete'),
             dataObj = getDataObject($row);
           $.each(config.columns, function(i, col) {
             var $el = $row.find('td[data-attribute="' + col.name + '"]');
             $el.on('click', $.proxy(col.handler, $el, col, dataObj));
           });
           //User can delete record using this button
           $deleteButton.on('click', $.proxy(config.deleteHandler, $row, dataObj));
         }
         function bindTableEvents($table, config) {
           $table.find('tbody tr').each(function(i, tr) {
             bindRowEvents(tr, config);
           });
           $table.find('thead button.add').on('click', $.proxy(config.addHandler, $table));
         }
         return function(config) {
           var me = this,
             columns = config.columns,
             addHandler = config.addHandler,
             deleteHandler = config.deleteHandler,
             $table;
           me.render = function(el) {
             $table = $(el).html(_.template(tableTpl)({
               columns: columns,
               data: me.data
             })).find('table');
             bindTableEvents($table, {
               columns: columns,
               addHandler: addHandler,
               deleteHandler: deleteHandler
             });
           }
           me.addRecord = function(record) {
             $table.find('tbody tr:first').before(_.template(trTpl)({
               columns: columns,
               data: [record]
             }));
             bindRowEvents($table.find('tbody tr:first'), config);
           }
           me.updateRecord = function(attributeName, newValue, record) {
             $table.find('tr[data-id="' + record.id + '"] td[data-attribute="' + attributeName + '"]').text(newValue);
           }
           me.removeRecord = function(record) {
             $table.find('tr[data-id="' + record.id + '"]').fadeTo("slow", 0.7, function() {
               $(this).remove();
             });
           }
         };
       })();
       //Applicaton ajax wrapper 
       function appAjax(processingMsg, ajaxOptions) {
         notificationMsg.show(processingMsg);
         return webapi.safeAjax(ajaxOptions)
           .fail(function(response) {
             if (response.responseJSON) {
               alert("Error: " + response.responseJSON.error.message)
             } else {
               alert("Error: Web API is not available... ")
             }
           }).always(notificationMsg.hide);
       }
       function loadRecords() {
         return appAjax('Loading...', {
           type: "GET",
           url: "/_api/contacts?$select=fullname,firstname,lastname,emailaddress1,telephone1",
           contentType: "application/json"
         });
       }
       function addSampleRecord() {
         //Sample data to create a record - change as appropriate
         var recordObj = {
           firstname: "Willie",
           lastname: "Huff" + _.random(100, 999),
           emailaddress1: "Willie.Huff@contoso.com",
           telephone1: "555-123-4567"
         };
         appAjax('Adding...', {
           type: "POST",
           url: "/_api/contacts",
           contentType: "application/json",
           data: JSON.stringify(recordObj),
           success: function(res, status, xhr) {
             recordObj.id = xhr.getResponseHeader("entityid");
             recordObj.fullname = recordObj.firstname + " " + recordObj.lastname;
             table.addRecord(recordObj);
           }
         });
         return false;
       }
       function deleteRecord(recordObj) {
         var response = confirm("Are you sure, you want to delete \"" + recordObj.name + "\" ?");
         if (response == true) {
           appAjax('Deleting...', {
             type: "DELETE",
             url: "/_api/contacts(" + recordObj.id + ")",
             contentType: "application/json",
             success: function(res) {
               table.removeRecord(recordObj);
             }
           });
         }
         return false;
       }
       function updateRecordAttribute(col, recordObj) {
         var attributeName = col.name,
           value = recordObj[attributeName],
           newValue = prompt("Please enter \"" + col.label + "\"", value);
         if (newValue != null && newValue !== value) {
           appAjax('Updating...', {
             type: "PUT",
             url: "/_api/contacts(" + recordObj.id + ")/" + attributeName,
             contentType: "application/json",
             data: JSON.stringify({
               "value": newValue
             }),
             success: function(res) {
               table.updateRecord(attributeName, newValue, recordObj);
             }
           });
         }
         return false;
       }
       var table = new webAPIExampleTable({
         columns: [{
           name: 'firstname',
           label: 'First Name',
           handler: updateRecordAttribute
         }, {
           name: 'lastname',
           label: 'Last Name',
           handler: updateRecordAttribute
         }, {
           name: 'emailaddress1',
           label: 'Email',
           handler: updateRecordAttribute
         }, {
           name: 'telephone1',
           label: 'Telephone',
           handler: updateRecordAttribute
         }],
         data: [],
         addHandler: addSampleRecord,
         deleteHandler: deleteRecord
       });
       loadRecords().done(function(data) {
         table.data = _.map(data.value, function(record){
           record.id = record.contactid;
           return record;
         });
         table.render($('#dataTable'));
       });
     });
   </script>
   <div id="processingMsg" class="alert alert-warning" role="alert"></div>
   <div id="dataTable"></div>
   

   

9. A kód mentéséhez használja a CTRL+S billentyűkombinációt.

10. Válassza a Szinkronizálás lehetőséget a tervezőstúdióban a webhely frissítéséhez a kódszerkesztésekkel.

4. lépés Használja a webes API-t elemek olvasására, megtekintésére, szerkesztésére, létrehozására és törlésére

A webes API-funkciók tesztelése:

1. Válassza az Előnézet, majd az Asztali lehetőséget.

2. Jelentkezzen be a webhelyre azzal a felhasználói fiókkal, amelyhez hozzárendelte a korábban létrehozott Webes API felhasználója szerepkört.

3. Nyissa meg a korábban létrehozott WebApi weboldalt.

   

4. Válassza a Mintarekord hozzáadása lehetőséget , hogy hozzáadja a mintarekordot a parancsfájlból.

5. Válasszon ki egy mezőt. Ebben a példában az E-mail lehetőséget választottuk, hogy módosítsuk egy kapcsolattartó e-mail-címét.

   

6. A rekordok törléséhez válassza a Törlés ikont.

Mután létrehozta weboldalt a rekordok olvasásához, megtekintéséhez, szerkesztéséhez, létrehozásához és törléséhez, testreszabhatja az űrlapokat és az elrendezést.

Következő lépés

HTTP-kérések összeállítása és hibák kezelése

Kapcsolódó információk

• Webes API áttekintése
• Műveletek írása, frissítése és törlése a webes API használatával
• Műveletek olvasása a webes API használatával
• Oszlopengedélyek konfigurálása