SharePoint REST API - javascript

I need your help. I want to build a form on website x which send data to a Sharepoint to domain y. I have the Office 365 Enterprise - Business Essentials License
Is that even possible?
What an where do I have to setup Office365 (API etc.)
Hot to connect via SharePoint REST API?
Can you guys give me an example for my HTML code. I have the same forms also in Sharepoint:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Test</title>
</head>
<body>
<h1>Test</h1>
<!-- HTML Form (wrapped in a .bootstrap-iso div) -->
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="form-group ">
<label class="control-label " for="name">
Name
</label>
<input readonly class="form-control" id="name" name="name" value="" type="text"/>
</div>
<div class="form-group ">
<label class="control-label " for="date">
Date
</label>
<input readonly class="form-control" id="date" name="date" value="" type="text"/>
</div>
<div class="form-group ">
<label class="control-label " for="time">
Time
</label>
<input readonly class="form-control" id="time" name="time" value="" type="text"/>
</div>
<div class="form-group ">
<label class="control-label " for="location">
Location
</label>
<input readonly class="form-control" id="location" name="location" value="" type="text"/>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>

Apart from CORS issue that Jeff mentioned in the comment, you need an App Registration in your SP Online environment:
https://yourtenantname.sharepoint.com/_layouts/15/appregnew.aspx
and then assigning App permisssions at:
https://yourtenantname.sharepoint.com/_layouts/15/appinv.aspx
Permissions XML:
<AppPermissionRequests AllowAppOnlyPolicy="true">
<AppPermissionRequest Scope="http://sharepoint/content/sitecollection/web"
Right="FullControl"/>
</AppPermissionRequests>
and then trusting the app.
These steps will provide you with an client id and secret that you need to use to implement OAuth 2.0 (authorization code grant flow or implicit grant flow depending upon your web app), which will get you the access token that you can use to authenticate SharePoint Rest API calls through authorization header.

Related

Bootstrap V5.0 not loading on chrome

Hi i am a beginner starting to trying out bootstrap now i am trying to do form validation, i tried to follow the guide
on https://getbootstrap.com/docs/5.0/forms/validation/ and when i run the exact form validation code, it seem bootstrap doesn't load in my chrome and not vaildating.
I had included the bootstrap css and js cdn link in my code.
Any helps will be greatly appreciated.
my code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
<script>
// Example starter JavaScript for disabling form submissions if there are invalid fields
(function () {
'use strict';
// Fetch all the forms we want to apply custom Bootstrap validation styles to
var forms = document.querySelectorAll('.needs-validation');
// Loop over them and prevent submission
Array.prototype.slice.call(forms)
.forEach(function (form) {
form.addEventListener('submit', function (event) {
if (!form.checkValidity()) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
})();
</script>
</head>
<body>
<form class="row g-3 needs-validation" novalidate>
<div class="col-md-4">
<label for="validationCustom01" class="form-label">First name</label>
<input type="text" class="form-control" id="validationCustom01" value="Mark" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustom02" class="form-label">Last name</label>
<input type="text" class="form-control" id="validationCustom02" value="Otto" required>
<div class="valid-feedback">
Looks good!
</div>
</div>
<div class="col-md-4">
<label for="validationCustomUsername" class="form-label">Username</label>
<div class="input-group has-validation">
<span class="input-group-text" id="inputGroupPrepend">#</span>
<input type="text" class="form-control" id="validationCustomUsername" aria-describedby="inputGroupPrepend" required>
<div class="invalid-feedback">
Please choose a username.
</div>
</div>
</div>
<div class="col-12">
<div class="form-check">
<input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
<label class="form-check-label" for="invalidCheck">
Agree to terms and conditions
</label>
<div class="invalid-feedback">
You must agree before submitting.
</div>
</div>
</div>
<div class="col-12">
<button class="btn btn-primary" type="submit">Submit form</button>
</div>
</form>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
Add the script tag just above closing </body> tag. It seems you got the script tag on between the <head/> tag which is causing the problem
<script
src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>

i am geeting the error where the HTML form elements are not getting loaded into the webpage .Any solution for the below code [duplicate]

This question already has answers here:
When to use single quotes, double quotes, and backticks in MySQL
(13 answers)
What to do with mysqli problems? Errors like mysqli_fetch_array(): Argument #1 must be of type mysqli_result and such
(1 answer)
How do I get PHP errors to display?
(27 answers)
Closed 1 year ago.
below in the image i am getting only the 3 form elements but there are more .I am unable to find the error where it is occuring .please help me to get the solution.
It is a basic html form there are like 10 form elements but when i connected it with the database and ran the code only the first 3 form elements are getting displayed.
It is basically connected to mysql data base in the backend and is a blog websites admin panel.
<?php
require "<includes/dbh.php";
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Free Bootstrap Admin Template : Dream</title>
<!-- Bootstrap Styles-->
<link href="assets/css/bootstrap.css" rel="stylesheet" />
<!-- FontAwesome Styles-->
<link href="assets/css/font-awesome.css" rel="stylesheet" />
<!-- Custom Styles-->
<link href="assets/css/custom-styles.css" rel="stylesheet" />
<!-- Google Fonts-->
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
</head>
<body>
<div id="wrapper">
<?php include "header.php"; include "sidebar.php" ?>
<div id="page-wrapper" >
<div id="page-inner">
<div class="row">
<div class="col-md-12">
<h1 class="page-header">
Write a Blog on spot
</h1>
</div>
</div>
<!-- /. ROW -->
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
Write a blog
</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<form role="form" method="POST" action="includes/add-blog.php" enctype="multipart/form-data">
<div class="form-group">
<label>Title</label>
<input class="form-control" name="blog-title">
</div>
<div class="form-group">
<label>Meta Title</label>
<input class="form-control" name="blog-meta-title">
</div>
<div class="form-group">
<label>Blog category</label>
<select class="form-control" name="blog-category">
<?php
$sqlCategories="SELECT * FROM blog-category";
$queryCategories=mysqli_query($conn,$sqlCategories);
while($rowCategories=mysqli_fetch_assoc($queryCategories)){
$cId=$rowCategories['n_category_id'];
$cName=$rowCategories['v_category_title'];
echo "<option value='".$cId."'>".$cName."</option>";
}
?>
</select>
</div>
<div class="form-group">
<label>Main image</label>
<input type="file" name="main-blog-image">
</div>
<div class="form-group">
<label>Alternate image</label>
<input type="file"name="alt-blog-image">
</div>
<div class="form-group">
<label>summary</label>
<textarea class="form-control" rows="3"name="blog-summary"></textarea>
</div>
<div class="form-group">
<label>Blog content</label>
<textarea class="form-control" rows="3" name="blog-content"></textarea>
</div>
<div class="form-group">
<label>Blog Tags seperated by commas</label>
<textarea class="form-control" rows="3" name="blog-tags"></textarea>
</div>
<div class="form-group input-group">
<label>Blog path</label>
<div class="input-group"> <span class="input-group-addon">www.sjg.com/</span>
<input type="text" class="form-control" placeholder="username" name="blog-path"></div>
</div>
<div class="form-group">
<label>Home Page Placement</label>
<label class="radio-inline">
<input type="radio" name="blog-home-page-placement" id="optionsRadiosInline1" value="option1" checked="">1
</label>
<label class="radio-inline">
<input type="radio" name="blog-home-page-placement" id="optionsRadiosInline2" value="option2">2
</label>
<label class="radio-inline">
<input type="radio" name="blog-home-page-placement" id="optionsRadiosInline3" value="option3">3
</label>
</div>
<button type="submit" class="btn btn-default" name="submit-blog">Add Blog</button>
</form>
</div>
</div>
<!-- /.row (nested) -->
</div>
<!-- /.panel-body -->
</div>
<!-- /.panel -->
</div>
<!-- /.col-lg-12 -->
</div>
<?php include "footer.php"; ?>
</div>
<!-- /. PAGE INNER -->
</div>
<!-- /. PAGE WRAPPER -->
</div>
<!-- /. WRAPPER -->
<!-- JS Scripts-->
<!-- jQuery Js -->
<script src="assets/js/jquery-1.10.2.js"></script>
<!-- Bootstrap Js -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- Metis Menu Js -->
<script src="assets/js/jquery.metisMenu.js"></script>
<!-- Custom Js -->
<script src="assets/js/custom-scripts.js"></script>
</body>
</html>
Above in the image i am getting only the 3 form elements but there are more .I am unable to find the error where it is occuring .please help me to get the solution.
It is a basic html form there are like 10 form elements but when i connected it with the database and ran the code only the first 3 form elements are getting displayed.
It is basically connected to mysql data base in the backend and is a blog websites admin panel.
Judging by where the page stops rendering, there's likely an error where your category dropdown is being populated. To check this you could add <?php error_reporting(E_ALL); ?> to the top of your file. Check the error_reporting docs here.
I'd also like to second #CBroe's observation that require "<includes/dbh.php"; doesn't look correct. Properly including that file may allow the category generation to occur and allow for the rest of the document to populate.
I'd also like to add that echo "<option value='".$cId."'>".$cName."</option>"; could be written as echo "<option value='{$cId}'>{$cName}</option>"; to help with human readability, if you so desired.

Bootstrap datepicker libraries loading order issue

I'm using SB Admin template for my application. I want to add bootstrap date picker to my input. But somehow I'm missing the order of JS & CSS libraries loading order which I think is not working in my case as going through multiple articles.
Below is code in <html> section
$('#datetimepicker').datepicker();
<head>
<link href="{{URL::asset('css/sb-admin-2.min.css')}}" rel="stylesheet">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.4.0/lang/en-gb.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.0.0/js/bootstrap-datetimepicker.min.js"></script>
</head>
<body>
<div class="col-md-4">
<label class="control-label" for="birthday">Birthday:</label>
<div class="form-group">
<div class='input-group date' id='datetimepicker'>
<input type='text' class="form-control" placeholder="dd/mm/yyyy" value="" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</body>
Thanks in Advance.
it's a conflict with moment.js as i know.look if moment have his own datepicker library.

Store and send form data to localStorage and webserver with jQuery mobile and PhoneGap

I'm developing an app with jQuery mobile and PhoneGap (Android) on Eclipse. I'm testing the app (index.html) with my chrome browser.
I want to build a login-system, so I've two pages: login and registration, both with html forms. Now I want to store the form data from registration in the localStorage (E-Mail and logged in flag) and send the data (E-Mail and Password) also to my node.js webserver (not implemented yet, because don't know how).
I've tried to do this, but it doesn't work. I've opend the registration form in my Browser (Chrome) and called the JavaScript Console (Resources -> Local Storage), but there is no data.
Then I want to show the data in the login page, but that doesn't work too.
That's my code:
http://jsbin.com/IBEgoyIf/2/edit?html,js,output
or here:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script src="js/jquery.validate.js"></script>
<script src="js/matchPassword.js"></script>
<script type="text/javascript" charset="utf-8" src="js/cordova.js"></script>
</head>
<body>
<div data-role="page" id="login">
<div data-role="content">
<form action="http://foo.com/login.js" method="POST">
<div data-role="fieldcontain">
<label for="url">E-Mail</label>
<input name="uid" id="email" placeholder="" value="" type="email" class="required">
</div>
<div data-role="fieldcontain">
<label for="url">Password</label>
<input name="upwd" id="pwd" placeholder="" value="" type="password" class="required">
</div>
<input type="submit" data-theme="b" value="Login">
</form>
<p id="myResults">myResults: </p>
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
<div data-role="navbar" data-iconpos="top">
<ul>
<li>Register</li>
</ul>
</div>
</div>
<script type="text/javascript" charset="utf-8">
$('#login').on("pagecreate", function() {
// Wait for device API libraries to load
//document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//function onDeviceReady() {
var userEmail = window.localStorage.getItem("localEmail");
var userFlag = window.localStorage.getItem("localLoggedIn");
document.getElementById("myResults").innerHTML = userEmail;
//}
//}
});
</script>
</div>
<div data-role="page" id="registration">
<div data-role="content">
<form action="#" method="post" id="registerForm">
<fieldset data-role="fieldcontain">
<label for="email">E-Mail:</label>
<input type="email" name="email" id="email" class="required email" minlength="5">
</fieldset>
<fieldset data-role="fieldcontain">
<label for="password">Password:</label>
<input type="password" name="password" id="password" class="required" minlength="5">
</fieldset>
<fieldset data-role="fieldcontain">
<label for="password2">Repeat Password:</label>
<input type="password" name="password2" id="password2" class="required passmatch" minlength="5">
</fieldset>
<input type="submit" data-theme="b" value="Register" onclick="store()">
</form>
</div>
<script type="text/javascript">
function store(){
// Wait for device API libraries to load
//document.addEventListener("deviceready", onDeviceReady, false);
// device APIs are available
//function onDeviceReady() {
var inputEmail = document.getElementById("email");
localStorage.setItem("localEmail", inputEmail.value);
localStorage.setItem("localLoggedIn", true);
window.location="#login";
//}
}
</script>
</div>
</body>
</html>

problem with my drop down login box?

i have a simple Jquery script which allow me to place a nice drop down login box but i have a simple issue with it
when i tried to place more than 1 box lets say 5 the script totally messed
i believe its something regarding the DIV id's and duplication but i don't find a way to resolve this problem
JS code
// Login Form
$(function() {
var button = $('#loginButton');
var box = $('#loginBox');
var form = $('#loginForm');
button.removeAttr('href');
button.mouseup(function(login) {
box.toggle();
button.toggleClass('active');
});
form.mouseup(function() {
return false;
});
$(this).mouseup(function(login) {
if(!($(login.target).parent('#loginButton').length > 0)) {
button.removeClass('active');
box.hide();
}
});
});
html code
<!doctype html>
<html>
<head>
<meta charset="utf8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Dropdown Login Freebie | The Finished Box</title>
<link rel="stylesheet" href="css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2"></script>
<script src="js/login.js"></script>
</head>
<body>
<div id="bar">
<div id="container">
<!-- Login Starts Here -->
<div id="loginContainer">
<span>Login</span><em></em>
<div style="clear:both"></div>
<div id="loginBox">
<form id="loginForm">
<fieldset id="body">
<fieldset>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" />
</fieldset>
<fieldset>
<label for="password">Password</label>
<input type="password" name="password" id="password" />
</fieldset>
<input type="submit" id="login" value="Sign in" />
<label for="checkbox"><input type="checkbox" id="checkbox" />Remember me</label>
</fieldset>
<span>Forgot your password?</span>
</form>
</div>
</div>
<!-- Login Ends Here -->
</div>
</div>
</body>
</html>
Yes, Change the ID's and It will work for more than one.

Categories