कैसे करें: पोर्टल वेब API का उपयोग
इस गाइड में, आप एक वेबपेज और कस्टम वेब टेम्प्लेट सेट अप करेंगे, जो संपर्क तालिका से रिकॉर्ड पढ़ने, लिखने, अपडेट करने और हटाने के लिए वेब API का उपयोग करेगा.
नोट
आप इस उदाहरण में दिए गए चरणों का पालन करते हुए कॉलम का नाम बदल सकते हैं, या किसी अन्य तालिका का उपयोग कर सकते हैं.
चरण 1. साइट सटिंग बनाएँ
इससे पहले कि आप पोर्टल वेब API का उपयोग कर सकें, आपको पोर्टल प्रबंधन अनुप्रयोग के साथ आवश्यक साइट सेटिंग्स को सक्षम करना होगा. साइट सेटिंग्स उस टेबल पर निर्भर करती हैं जिसका उपयोग आप Web API के साथ इंटरैक्ट करते समय करना होता है.
पोर्टल प्रबंधन ऐप शुरू करें.
पोर्टल प्रबंधन ऐप के बाएँ फलक पर, साइट सेटिंग्स का चयन करें.
नया चुनें.
नाम बॉक्स में, Webapi/contact/enabled दर्ज करें.
वेबसाइट सूची में, अपना वेबसाइट रिकॉर्ड चुनें.
मान बॉक्स में, सही दर्ज करें.
सहेजें और बंद करें चुनें.
नया चुनें.
नाम बॉक्स में, Webapi/contact/fields दर्ज करें.
वेबसाइट सूची में, अपना वेबसाइट रिकॉर्ड चुनें.
मान बॉक्स में, दर्ज करें
प्रथम नाम, अंतिम नाम, पूरा नाम, ईमेल पता1, टेलीफोन1
सहेजें और बंद करें चुनें.
नया चुनें.
नाम बॉक्स में, Webapi/error/innererror दर्ज करें.
वेबसाइट सूची में, अपना वेबसाइट रिकॉर्ड चुनें.
मान बॉक्स में, सही दर्ज करें.
सहेजें और बंद करें चुनें.
वेब API के लिए साइट सेटिंग्स सत्यापित करें.
चरण 2. अनुमतियों को कॉन्फ़िगर करें
आपको अनुमतियाँ कॉन्फ़िगर करनी होंगी ताकि उपयोगकर्ता वेब API सुविधा का उपयोग कर सकें. इस उदाहरण में, आपको ऐसी नई वेब भूमिका बनानी होगी जो वेब API का उपयोग करेगी, उसके बाद आप संपर्क तालिका के लिए तालिका अनुमतियाँ जोड़ेंगे और तालिका अनुमति को वेब भूमिका से संबद्ध करेंगे और अंत में उपयोगकर्ताओं को वेब भूमिका असाइन करेंगे, जिससे वे Web API का उपयोग कर पाएं.
नोट
वेब API प्रमाणीकृत उपयोगकर्ता या अनाम वेब भूमिका के वेब भूमिका संदर्भ से आने वाली तालिका अनुमतियों का अनुसरण करता है. विचार करें कि क्या आपके उपयोगकर्ताओं के पास पहले से ही एक वेब भूमिका है जिसकी वेब API के लिए आवश्यक आपकी वेबसाइट की विशिष्ट तालिकाओं तक पहुंच है. आपको केवल वेब API का उपयोग करने के लिए अतिरिक्त वेब भूमिकाएँ बनाने की आवश्यकता नहीं है.
एक वेब भूमिका बनाएँ
यदि आपके पास वर्तमान में उस तालिका की अनुमति के साथ कोई वेब भूमिका नहीं है जिसे आप वेब API के माध्यम से एक्सेस कर रहे हैं या डेटा तक पहुंचने के लिए अलग-अलग संदर्भ की आवश्यकता है, तो निम्न चरण आपको एक नई वेब भूमिका बनाने और तालिका अनुमतियां निर्दिष्ट करने का तरीका बताएंगे.
पोर्टल प्रबंधन ऐप शुरू करें.
बाएँ फलक पर, सुरक्षा सेक्शन में, वेब भूमिकाएँ का चयन करें.
नया चुनें.
नाम बॉक्स में, वेब API उपयोगकर्ता दर्ज करें (या कोई भी नाम जो इस कार्यक्षमता तक पहुंचने वाले उपयोगकर्ता की भूमिका को सबसे अच्छा दर्शाता है).
वेबसाइट सूची में, अपना वेबसाइट रिकॉर्ड चुनें.
सहेजें चुनें.
तालिका अनुमतियाँ बनाएँ
Power Pages डिज़ाइन स्टूडियो लॉन्च करें.
सुरक्षा कार्यस्थान का चयन करें.
सुरक्षा अनुभाग के अंतर्गत, तालिका अनुमतियाँ चुनें.
नई अनुमति चुनें.
नाम बॉक्स में, संपर्क टेबल अनुमति प्रविष्ट करें.
तालिका नाम सूची में, संपर्क (संपर्क) चुनें.
एक्सेस प्रकार सूची में, वैश्विक चुनें.
पढ़ें, लिखें, बनाएँ, और हटाएं विशेषाधिकार चुनें.
+ भूमिकाएँ जोड़ें चुनें और वह वेब भूमिका चुनें जिसे आपने पहले चुना या बनाया था.
सहेजें और बंद करें चुनें.
वेब भूमिका में संपर्क जोड़ें
पोर्टल प्रबंधन ऐप शुरू करें.
बाएँ फलक पर, सुरक्षा सेक्शन में, संपर्क का चयन करें.
उस संपर्क का चयन करें जिसे आप वेब API के लिए इस उदाहरण में उपयोग करना चाहते हैं.
नोट
यह संपर्क वेब API के परीक्षण के लिए इस उदाहरण में उपयोग किया गया उपयोगकर्ता खाता है. अपने पोर्टल में सही संपर्क का चयन करना सुनिश्चित करें.
संबंधित>वेब भूमिकाएँ का चयन करें.
मौजूदा वेब भूमिका जोड़ें का चयन करें.
पहले बनाई गई वेब API उपयोगकर्ता भूमिका का चयन करें.
जोड़ें चुनें.
सहेजें और बंद करें चुनें.
चरण 3. एक वेबपृष्ठ बनाए
अब जब आप वेब API को सक्षम कर चुके हैं और उपयोगकर्ता की अनुमतियों को कॉन्फ़िगर कर चुके हैं, तो रिकॉर्ड देखने, संपादित करने, बनाने और हटाने के लिए नमूना कोड के साथ एक वेबपेज बनाएँ.
Power Pages डिज़ाइन स्टूडियो लॉन्च करें.
पेज कार्यस्थान में, + पेज चुनें.
एक पेज जोड़ें संवाद में,
नाम बॉक्स में, WebAPI दर्ज करें और रिक्त से प्रारंभ करें लेआउट चुनें.
जोड़ें चुनें.
ऊपरी दाएं कोने में कोड संपादित करें विकल्प चुनें.
Visual Studio Code खोलें चुनें.
निम्नलिखित नमूना कोड स्निपेट को कॉपी करें और इसे पेज सेक्शन के
<div></div>टैग के बीच पेस्ट करें.<!-- 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>
कोड को सहेजने के लिए CTRL-S चुनें.
डिज़ाइन स्टूडियो में कोड संपादनों के साथ साइट को अपडेट करने के लिए सिंक करें चुनें.
चरण 4. पढ़ने, देखने, संपादित करने, बनाने और हटाने के लिए वेब एपीआई का उपयोग करें
वेब API कार्यक्षमता का परीक्षण करने के लिए:
पूर्वावलोकन चुनें और फिर डेस्कटॉप का चयन करें.
उस उपयोगकर्ता खाते के साथ अपनी साइट में साइन इन करें, जिसे आपके द्वारा पहले बनाई गई वेब API उपयोगकर्ता भूमिका सौंपी गई है.
पहले बनाए गए WebApi वेबपेज पर जाएं.
स्क्रिप्ट से नमूना रिकॉर्ड जोड़ने के लिए नमूना रिकॉर्ड जोड़ें चुनें.
एक फ़ील्ड चुनें. इस उदाहरण में, हमने संपर्क का ईमेल पता बदलने के लिए ईमेल का चयन किया है.
रिकॉर्ड को हटाने के लिए हटाएँ का चयन करें.
अब जबकि आपने रिकॉर्ड पढ़ने, संपादित करने, बनाने और हटाने के लिए नमूने के साथ एक वेबपेज बना लिया है, तो आप प्रपत्रों और लेआउट को अनुकूलित कर सकते हैं.
अगला चरण
HTTP अनुरोध लिखें और त्रुटियों को संभालें