How to create a popup with html and javascript in kinton

1 
(function () {
"use strict";

var AppId_ = '6390';
var c_date = '';
var c_annual = '';
var dataOBJ;
var data = new Array();
var dataUpdate = new Array();

////////////////////////////////////////////////////////////////////////////
// Event Handlers
/**
* Event Handler: List screen is shown.
*/
kintone.events.on('app.record.index.show', function (event) {
let appId = event.appId;

// =====================================================================
// Add a new button on the header
let btnUpdate = document.createElement('button');
btnUpdate.id = 'my_button';
btnUpdate.innerHTML = 'Popup Dropdow';
let spaceElement = kintone.app.getHeaderMenuSpaceElement();

// ---------------------------------------------------------------------
// Remove Childlen of Space
// If This statement is nothing,
// Button is duplicated when clicking at header of list (sorting list).
for (let i = spaceElement.childNodes.length - 1; i >= 0; i--) {
spaceElement.removeChild(spaceElement.childNodes[i]);
}

spaceElement.appendChild(btnUpdate);

// =====================================================================
// Set the event listner when clicking button.
btnUpdate.addEventListener('click', function () {
< !DOCTYPE html >
<html>
<head>
</head>
<body>
<h2>Modal Example</h2>
<div class="form-popup" id="myForm">
<form action="/action_page.php" class="form-container">
<h1>Login</h1>

<label for="email"><b>Email</b></label>
<input type="text" placeholder="Enter Email" name="email" required>

<label for="psw"><b>Password</b></label>
<input type="password" placeholder="Enter Password" name="psw" required>

<button type="submit" class="btn">Login</button>
<button type="button" class="btn cancel" onclick="closeForm()">Close</button>
</form>
</div>

<script>
function openForm() {
document.getElementById("myForm").style.display = "block";
}

function closeForm() {
document.getElementById("myForm").style.display = "none";
}
</script>

</body>
</html>
});
});
})();

How to html + javascript in kintone

2

Hello there,

 

 

What is your question? What kind of popup are you looking for?

There are several articles in the Kintone Developer program where it talk about popups.

 

Kintone Developer Program - Display SweetAlert pop-ups

https://developer.kintone.io/hc/en-us/articles/115007586507

 

Kintone Developer Program - Display SweetAlert2 pop-ups

https://developer.kintone.io/hc/en-us/articles/360008292293-Display-SweetAlert2-pop-ups

 

I hope this answers your question.

3

When pressing the button, show popup as in the picture.

I can’t find samples.

Can it be done?

4

Hello NewTum,

The dialogue you are looking for can be easily made by using a library like SweetAlert2.
The code below will have the “button” on the page and when clicking on it, the dialogue will show up. You can adjust it as you wish.

(function () {
"use strict";
kintone.events.on('app.record.index.show', function (event) {
if (document.getElementById('my_index_button') !== null) {
return;
}

  var myIndexButton = document.createElement('button');
  myIndexButton.id = 'my_index_button';
myIndexButton.innerText = 'button';

  myIndexButton.onclick = function () {

  swal({
title: 'Select your supplier',
input: 'select',
inputOptions: {
'1': 'ABB LIMITED'
},
  inputPlaceholder: '---',
showCancelButton: true
}).then(function (result) {
});

  };

  kintone.app.getHeaderMenuSpaceElement().appendChild(myIndexButton);
});
})();

Please don’t forget to upload the SweetAlert2’s library to kintone when executing the code above.
There are many parameters on here on the link so you would have to choose depending on what you are looking for.

https://sweetalert2.github.io/#usage

Hope this helps,

Sean