HTML-Formulare an Sharepoint Bibliotheken

Einen Anwendungfall, den ich sehr häufig habe ist, dass man ausgehend von einer HTML-Webseite Daten übermitteln möchte, die man beispielsweise in einer Sharepoint-Bibliothek speichern möchte.

Ein solches Kontaktformular könnte beispielsweise so aussehen:

Dieses Formular soll nun einen Power Automate Prozess auslösen, der einerseits in eine Sharepoint Bibliothek schreibt und andererseits ein Email an mich schickt. Der Flow ist grundsätzlich relativ einfach und auch die einzelnen Schritte sind kein Hexenwerk. Entscheidend ist nur der “Request Body JSON Schema”:

{
    "type": "object",
    "properties": {
        "name": {
            "type": "string"
        },
        "email": {
            "type": "string"
        },
        "subject": {
            "type": "string"
        },
        "message": {
            "type": "string"
        }
    }
}

Der entsprechende HTML-Code (eigentlich der JS-Code) für die Übermittlung:

	document.getElementById('contactForm').addEventListener('submit', function(event) {
	event.preventDefault();
	var data = {
	name: document.getElementById('name').value,
	email: document.getElementById('email').value,
	subject: document.getElementById('subject').value,
	message: document.getElementById('message').value
	};

	fetch('xxxxx', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json'
	},
	body: JSON.stringify(data)
	})
	.then(response => {
	if(response.ok) {
	return response.text();
	} else {
	return response.text().then(text => {
	throw new Error(text \|\| 'Serverantwort war nicht OK.');
	});
	}
	})
	.then(text => {
	if(text) {
	try {
	const responseData = JSON.parse(text);
	console.log('Response ID:', responseData.ID); // Protokolliert die ID der Antwort
	document.getElementById('form-message-success').textContent = 'Ihre Nachricht wurde erfolgreich gesendet. Response ID: ' + responseData.ID;
	} catch(error) {
	document.getElementById('form-message-success').textContent = 'Ihre Nachricht wurde erfolgreich gesendet, aber es wurden keine Daten zurückgegeben.';
	}
	} else {
	document.getElementById('form-message-success').textContent = 'Ihre Nachricht wurde erfolgreich gesendet, aber es wurden keine Daten zurückgegeben.';
	}
	document.getElementById('form-message-success').style.display = 'block';
	document.getElementById('form-message-warning').style.display = 'none';
	})
	.catch(error => {
	document.getElementById('form-message-warning').textContent = 'Fehler: ' + error.message;
	document.getElementById('form-message-success').style.display = 'none';
	document.getElementById('form-message-warning').style.display = 'block';
	});
	});