+ID: ${result.id}
+Title: ${result.title}
+ `; + }) + .catch(error => { + console.error('Error:', error); + }); +} + +// Function to make a GET request to retrieve CPI data +function getCPI() { + const url = 'https://localhost:8888/api/v1/cpi'; + // Perform the GET request with authorization headers + return fetch(url, { + method: 'GET', + headers: { + 'Accept': 'application/json', + 'Authorization': 'Basic YWRtaW46YWRtaW4=' + } + }) + .then(response => response.json()) + .then(data => { + console.log('API Result:', data); + // Further processing of the data can be done here + }) + .catch(error => { + console.error('Error:', error); + }); +} + +// Function to get all virtual nodes and populate a dropdown with the data +function getAllVirtualNodes() { + const url = 'https://localhost:8888/api/v1/virtualnode'; + + return fetch(url, { + method: 'GET', + headers: { + 'Accept': 'application/json', + 'Authorization': 'Basic YWRtaW46YWRtaW4=' + } + }) + .then(response => response.json()) + .then(data => { + // Extract virtualNodes from the API response + const virtualNodes = data.virtualNodes; + console.log('API Result:', virtualNodes); + + // Process the data and populate the dropdown + if (Array.isArray(virtualNodes)) { + const dropdown = document.getElementById('itemDropdown'); + dropdown.innerHTML = ''; + dropdown.innerHTML += ''; + + virtualNodes.forEach(item => { + // Display each item on the console + console.log('Item X500Name:', item.holdingIdentity.x500Name); + console.log('Item ShortHash:', item.holdingIdentity.shortHash); + + // Create an option element and add it to the dropdown + const option = document.createElement('option'); + option.value = item.holdingIdentity.shortHash; + option.text = item.holdingIdentity.x500Name; + dropdown.appendChild(option); + }); + + // Add event listener to the dropdown to detect changes + dropdown.addEventListener('change', function () { + selectedX500Name = this.value; + console.log('Selected ShortHash:', selectedX500Name); + + // Call a function or update a variable based on the selected item + handleDropdownChange(selectedX500Name); + }); + + } else { + console.warn('API Result is not an array.'); + } + }) + .catch(error => { + console.error('Error:', error); + }); +} + +// Initialize the virtual nodes dropdown on page load +getAllVirtualNodes(); + +// function to handle dropdown change +function handleDropdownChange(selectedX500Name) { + console.log('Handling dropdown change for Item ID:', selectedX500Name); + getSelectedVNode(); + // Additional actions based on the selected item can be performed here +} + +// Function to get the selected virtual node and display it +function getSelectedVNode() { + const displayElement = document.getElementById('selectedX500Display'); + displayElement.textContent = `Selected X500: ${selectedX500Name}`; +} + +// Function to get all flow results based on the selected virtual node +function getAllFlowResult() { + const url = `https://localhost:8888/api/v1/flow/${selectedX500Name}`; + + return fetch(url, { + method: 'GET', + headers: { + 'Accept': 'application/json', + 'Authorization': 'Basic YWRtaW46YWRtaW4=' + } + }) + .then(response => response.json()) + .then(data => { + const flowStatusResponses = data.flowStatusResponses; + console.log('API Result:', flowStatusResponses); + + // Convert the JSON object to a string for display + const jsonString = JSON.stringify(flowStatusResponses, null, 2); + + // Display the JSON string in the result div + document.getElementById('idResutl').innerHTML = `${jsonString}`;
+ })
+ .catch(error => {
+ console.error('Error:', error);
+ });
+}
+
+// Function to make a POST request with a request body
+async function postCallFlow() {
+ let postBtn = $('#postBtn');
+ const url = `https://localhost:8888/api/v1/flow/${selectedX500Name}`;
+
+ // Change the button text to indicate loading
+ postBtn.html('Loading...');
+
+ try {
+ // Perform the POST request with the provided request body
+ const response = await fetch(url, {
+ method: 'POST',
+ headers: {
+ 'Accept': 'application/json',
+ 'Authorization': 'Basic YWRtaW46YWRtaW4=',
+ 'Content-Type': 'application/json'
+ },
+ body: `${document.getElementById('requestBody').value}`
+ });
+
+ // Parse the response as JSON
+ const data = await response.json();
+
+ if (!data.ok) {
+ console.log(data.status);
+
+ // Check if the response status is not OK (2xx range)
+ if (data.status == "409" || data.status == "400") {
+ let flowStatusResponse = "title: " + data.title + "\nStatus: " + data.status;
+
+ // Display additional details for 400 status
+ if (data.status == "400") {
+ flowStatusResponse += "\nDetails: \n Cause: " + data.details.cause + "\n Reason: " + data.details.reason;
+ }
+
+ document.getElementById('queryResult').innerHTML = `${flowStatusResponse}`;
+ return;
+ }
+ }
+
+ let msg = "null";
+ let typ = "null";
+
+ // Construct a string with the flow status responses
+ let flowStatusResponses = "client request ID: " + data.clientRequestId +
+ "\nFlow Result " + data.flowResult +
+ "\nFlow Error Message: " + msg +
+ "\nflow error type: " + typ +
+ "\nFlow ID: " + data.flowId +
+ "\nFlow status: " + data.flowStatus +
+ "\nHolding identity short hash: " + data.holdingIdentityShortHash +
+ "\nTime stamp: " + data.timestamp;
+
+ console.log('API Result:', flowStatusResponses);
+
+ // Display the flow status responses in the result div
+ document.getElementById('queryResult').innerHTML = `${flowStatusResponses}`;
+ } catch (error) {
+ console.log('Error:', error);
+ } finally {
+ // Restore the button text after the operation is complete
+ postBtn.html('Post');
+ }
+}
+
+// Function to display an item on the page
+function displayItemOnPage(item) {
+ const resultDiv = document.getElementById('queryResult');
+
+ // Create a new element to display the item
+ const itemElement = document.createElement('div');
+ itemElement.innerHTML = `
+ QueryResult: ${item}
+ `; + + // Append the new element to the result div + resultDiv.appendChild(itemElement); +} + +// Function to open a specific tab by hiding/showing content +function openTab(tabName) { + // Hide all tab content + var tabContents = document.getElementsByClassName("tab-content"); + for (var i = 0; i < tabContents.length; i++) { + tabContents[i].style.display = "none"; + document.getElementById(tabContents[i].id + "-tab").style.backgroundColor = "rgb(52,152,219)"; + } + + // Show the selected tab content + var selectedTab = document.getElementById(tabName); + if (selectedTab) { + selectedTab.style.display = "block"; + document.getElementById(tabName + "-tab").style.backgroundColor = "rgb(173,216,230)"; + } +} + +// Function to display a flow for a specific virtual node +function oneFlow() { + const url = `https://localhost:8888/api/v1/flow/${selectedX500Name}/${document.getElementById('clientID').value}`; + + // Validate clientID input + if (document.getElementById('clientID').value == "") { + alert("Please input a clientId"); + return; + } + + // Perform a GET request to display a flow + return fetch(url, { + method: 'GET', + headers: { + 'Accept': 'application/json', + 'Authorization': 'Basic YWRtaW46YWRtaW4=' + } + }) + .then(response => response.json()) + .then(data => { + let msg = "null"; + let typ = "null"; + + // Check if the flow status is "FAILED" and extract error details + if (data.flowStatus == "FAILED") { + msg = data.flowError.message; + typ = data.flowError.type; + } + + // Construct a string with the flow status responses + const flowStatusResponses = "client request ID: " + data.clientRequestId + + "\nFlow Result " + data.flowResult + + "\nFlow Error Message: " + msg + + "\nflow error type: " + typ + + "\nFlow ID: " + data.flowId + + "\nFlow status: " + data.flowStatus + + "\nHolding identity short hash: " + data.holdingIdentityShortHash + + "\nTime stamp: " + data.timestamp; + + console.log('API Result:', flowStatusResponses); + + // Display the flow status responses in the result div + document.getElementById('idResutl').innerHTML = `${flowStatusResponses}`;
+ })
+ .catch(error => {
+ console.error('Error:', error);
+ });
+}
+
+// Function to determine which flow-related action to execute based on user input
+function executeButtonFlow() {
+ // Check the value of the dropdown to determine which action to perform
+ if (document.getElementById("dropdown").value == "option1") {
+ getAllFlowResult();
+ } else {
+ oneFlow();
+ }
+}
+
+function queryDropDownChange(){
+ if (document.getElementById("dropdown").value == "option1") {
+ document.getElementById("clientID").style.display = 'none';
+ }else{
+ document.getElementById("clientID").style.display = 'block';
+
+ }
+}
\ No newline at end of file
diff --git a/java-samples/sendAndRecieveTransaction/FlowManagementUI/static/css/main.css b/java-samples/sendAndRecieveTransaction/FlowManagementUI/static/css/main.css
new file mode 100644
index 0000000..5e4d849
--- /dev/null
+++ b/java-samples/sendAndRecieveTransaction/FlowManagementUI/static/css/main.css
@@ -0,0 +1,202 @@
+body {
+ font-family: 'Roboto', sans-serif;
+ background-color: #f4f4f4;
+ color: #333;
+ margin: 50px; /* Add margin to the entire body */
+ padding: 0;
+}
+
+h1 {
+ text-align: center;
+ color: #0e0c0c;
+}
+
+/* Style for the label */
+label {
+ display: block;
+ margin-bottom: 10px;
+ font-weight: bold;
+ color: #333;
+}
+/* Style for the dropdown button */
+select {
+ width: 20%;
+ padding: 8px;
+ margin-right: 10px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ box-sizing: border-box;
+ font-size: 14px;
+ color: #555;
+}
+
+#itemDropdown {
+ width: 40%;
+ padding: 10px;
+ box-sizing: border-box;
+}
+
+#clientID{
+ padding: 8px;
+ margin-bottom: 15px;
+ margin-right: 10px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ box-sizing: border-box;
+ font-size: 14px;
+ color: #555;
+}
+
+#OneFlowButon{
+ padding: 8px;
+ margin-bottom: 15px;
+ margin-right: 10px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ box-sizing: border-box;
+ font-size: 14px;
+}
+
+#result {
+ margin-bottom: 10px;
+}
+
+/* Button styling */
+button {
+ background-color: #3498db;
+ color: #fff;
+ padding: 10px 25px;
+ font-size: 16px;
+ border: 2px;
+ border-radius: 15px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+button:hover {
+ background-color: #2980b9;
+}
+
+/* Tab styling */
+.tab {
+ list-style-type: none; /* Remove default list styles */
+ display: inline-block; /* Display tabs inline */
+ padding: 2px 00px; /* Add padding to the tabs */
+ margin: 0 1px; /* Add margin between tabs */
+ cursor: pointer; /* Change cursor to pointer on hover */
+}
+
+
+.tab li {
+ flex: 1;
+ text-align: center;
+ padding: 10px;
+ background-color: #3498db;
+ color: #fff;
+ border-radius: 8px 15px 0 0;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+.tab li:hover {
+ background-color: #2980b9;
+}
+
+/* Tab content styling */
+.tab-content {
+ display: none;
+ padding: 20px;
+ border: 1px solid #3498db;
+ border-radius: 0 0 5px 5px;
+ background-color: #fff;
+}
+
+.styled-input {
+ width: 100%;
+ padding: 10px;
+ margin-bottom: 10px;
+ box-sizing: border-box;
+}
+
+.output {
+ border: 1px solid #3498db;
+ padding: 10px;
+ border-radius: 5px;
+ background-color: #fff;
+ box-sizing: border-box;
+}
+
+#idResutl {
+ border: 1px solid #3498db;
+ padding: 10px;
+ border-radius: 5px;
+ background-color: #fff;
+ margin-top: 10px;
+ height: 290px;
+ max-height: 290px; /* Set a maximum height for the scroll box */
+ overflow-y: auto; /* Enable vertical scrolling if content exceeds the box height */
+}
+
+/* Responsive design */
+@media screen and (max-width: 600px) {
+ .tab li {
+ border-radius: 5px;
+ margin-bottom: 5px;
+ }
+ .tab-content {
+ border-radius: 5px;
+ }
+}
+#call {
+ display: -ms-inline-flexbox;
+ flex-wrap: wrap;
+
+}
+
+/* Style for side-by-side input boxes */
+.flowcall-container {
+ display: flex;
+}
+
+.input-box, .text-box {
+ width: 150px; /* Set the desired width */
+ margin-right: 10px; /* Optional: Add margin for spacing between input boxes */
+ border-radius: 5px;
+ border: 1px solid #3498db;
+}
+
+.queryoption-container{
+ display: flex;
+}
+
+
+
+#requestBody {
+ flex: 1;
+ box-sizing: border-box;
+ width: 100px; /* Set the desired width */
+ height: 300px; /* Set the desired height */
+ padding: 10px; /* Optional: Add padding for better aesthetics */
+ margin-right: 10px; /* Add some margin between the input and button */
+}
+
+#postBtn {
+ flex: 0 0 auto; /* Don't allow the button to grow or shrink */
+ margin-top: 10px; /* Add some margin between the button and result box */
+ margin-right: 10px; /* Add some margin between the button and result box */
+ width: 500px; /* Set the desired width */
+ height: 50px; /* Set the desired height */
+}
+
+#queryResult {
+ flex: 1;
+ box-sizing: border-box;
+ width: 100px; /* Set the desired width */
+ height: 300px; /* Set the desired height */
+ padding: 10px; /* Optional: Add padding for better aesthetics */
+}
+.content-box{
+ padding: 10px; /* Add padding to the content boxes */
+}
+
+
diff --git a/java-samples/sendAndRecieveTransaction/FlowManagementUI/templates/index.html b/java-samples/sendAndRecieveTransaction/FlowManagementUI/templates/index.html
new file mode 100644
index 0000000..44df7ac
--- /dev/null
+++ b/java-samples/sendAndRecieveTransaction/FlowManagementUI/templates/index.html
@@ -0,0 +1,87 @@
+
+
+
+
+
+
+
+
+
+ Please select a flow initiator
+ + +
+
+
+ 
+
+ 
+
ID: ${result.id}
+Title: ${result.title}
+ `; + }) + .catch(error => { + console.error('Error:', error); + }); +} + +// Function to make a GET request to retrieve CPI data +function getCPI() { + const url = 'https://localhost:8888/api/v1/cpi'; + // Perform the GET request with authorization headers + return fetch(url, { + method: 'GET', + headers: { + 'Accept': 'application/json', + 'Authorization': 'Basic YWRtaW46YWRtaW4=' + } + }) + .then(response => response.json()) + .then(data => { + console.log('API Result:', data); + // Further processing of the data can be done here + }) + .catch(error => { + console.error('Error:', error); + }); +} + +// Function to get all virtual nodes and populate a dropdown with the data +function getAllVirtualNodes() { + const url = 'https://localhost:8888/api/v1/virtualnode'; + + return fetch(url, { + method: 'GET', + headers: { + 'Accept': 'application/json', + 'Authorization': 'Basic YWRtaW46YWRtaW4=' + } + }) + .then(response => response.json()) + .then(data => { + // Extract virtualNodes from the API response + const virtualNodes = data.virtualNodes; + console.log('API Result:', virtualNodes); + + // Process the data and populate the dropdown + if (Array.isArray(virtualNodes)) { + const dropdown = document.getElementById('itemDropdown'); + dropdown.innerHTML = ''; + dropdown.innerHTML += ''; + + virtualNodes.forEach(item => { + // Display each item on the console + console.log('Item X500Name:', item.holdingIdentity.x500Name); + console.log('Item ShortHash:', item.holdingIdentity.shortHash); + + // Create an option element and add it to the dropdown + const option = document.createElement('option'); + option.value = item.holdingIdentity.shortHash; + option.text = item.holdingIdentity.x500Name; + dropdown.appendChild(option); + }); + + // Add event listener to the dropdown to detect changes + dropdown.addEventListener('change', function () { + selectedX500Name = this.value; + console.log('Selected ShortHash:', selectedX500Name); + + // Call a function or update a variable based on the selected item + handleDropdownChange(selectedX500Name); + }); + + } else { + console.warn('API Result is not an array.'); + } + }) + .catch(error => { + console.error('Error:', error); + }); +} + +// Initialize the virtual nodes dropdown on page load +getAllVirtualNodes(); + +// function to handle dropdown change +function handleDropdownChange(selectedX500Name) { + console.log('Handling dropdown change for Item ID:', selectedX500Name); + getSelectedVNode(); + // Additional actions based on the selected item can be performed here +} + +// Function to get the selected virtual node and display it +function getSelectedVNode() { + const displayElement = document.getElementById('selectedX500Display'); + displayElement.textContent = `Selected X500: ${selectedX500Name}`; +} + +// Function to get all flow results based on the selected virtual node +function getAllFlowResult() { + const url = `https://localhost:8888/api/v1/flow/${selectedX500Name}`; + + return fetch(url, { + method: 'GET', + headers: { + 'Accept': 'application/json', + 'Authorization': 'Basic YWRtaW46YWRtaW4=' + } + }) + .then(response => response.json()) + .then(data => { + const flowStatusResponses = data.flowStatusResponses; + console.log('API Result:', flowStatusResponses); + + // Convert the JSON object to a string for display + const jsonString = JSON.stringify(flowStatusResponses, null, 2); + + // Display the JSON string in the result div + document.getElementById('idResutl').innerHTML = `${jsonString}`;
+ })
+ .catch(error => {
+ console.error('Error:', error);
+ });
+}
+
+// Function to make a POST request with a request body
+async function postCallFlow() {
+ let postBtn = $('#postBtn');
+ const url = `https://localhost:8888/api/v1/flow/${selectedX500Name}`;
+
+ // Change the button text to indicate loading
+ postBtn.html('Loading...');
+
+ try {
+ // Perform the POST request with the provided request body
+ const response = await fetch(url, {
+ method: 'POST',
+ headers: {
+ 'Accept': 'application/json',
+ 'Authorization': 'Basic YWRtaW46YWRtaW4=',
+ 'Content-Type': 'application/json'
+ },
+ body: `${document.getElementById('requestBody').value}`
+ });
+
+ // Parse the response as JSON
+ const data = await response.json();
+
+ if (!data.ok) {
+ console.log(data.status);
+
+ // Check if the response status is not OK (2xx range)
+ if (data.status == "409" || data.status == "400") {
+ let flowStatusResponse = "title: " + data.title + "\nStatus: " + data.status;
+
+ // Display additional details for 400 status
+ if (data.status == "400") {
+ flowStatusResponse += "\nDetails: \n Cause: " + data.details.cause + "\n Reason: " + data.details.reason;
+ }
+
+ document.getElementById('queryResult').innerHTML = `${flowStatusResponse}`;
+ return;
+ }
+ }
+
+ let msg = "null";
+ let typ = "null";
+
+ // Construct a string with the flow status responses
+ let flowStatusResponses = "client request ID: " + data.clientRequestId +
+ "\nFlow Result " + data.flowResult +
+ "\nFlow Error Message: " + msg +
+ "\nflow error type: " + typ +
+ "\nFlow ID: " + data.flowId +
+ "\nFlow status: " + data.flowStatus +
+ "\nHolding identity short hash: " + data.holdingIdentityShortHash +
+ "\nTime stamp: " + data.timestamp;
+
+ console.log('API Result:', flowStatusResponses);
+
+ // Display the flow status responses in the result div
+ document.getElementById('queryResult').innerHTML = `${flowStatusResponses}`;
+ } catch (error) {
+ console.log('Error:', error);
+ } finally {
+ // Restore the button text after the operation is complete
+ postBtn.html('Post');
+ }
+}
+
+// Function to display an item on the page
+function displayItemOnPage(item) {
+ const resultDiv = document.getElementById('queryResult');
+
+ // Create a new element to display the item
+ const itemElement = document.createElement('div');
+ itemElement.innerHTML = `
+ QueryResult: ${item}
+ `; + + // Append the new element to the result div + resultDiv.appendChild(itemElement); +} + +// Function to open a specific tab by hiding/showing content +function openTab(tabName) { + // Hide all tab content + var tabContents = document.getElementsByClassName("tab-content"); + for (var i = 0; i < tabContents.length; i++) { + tabContents[i].style.display = "none"; + document.getElementById(tabContents[i].id + "-tab").style.backgroundColor = "rgb(52,152,219)"; + } + + // Show the selected tab content + var selectedTab = document.getElementById(tabName); + if (selectedTab) { + selectedTab.style.display = "block"; + document.getElementById(tabName + "-tab").style.backgroundColor = "rgb(173,216,230)"; + } +} + +// Function to display a flow for a specific virtual node +function oneFlow() { + const url = `https://localhost:8888/api/v1/flow/${selectedX500Name}/${document.getElementById('clientID').value}`; + + // Validate clientID input + if (document.getElementById('clientID').value == "") { + alert("Please input a clientId"); + return; + } + + // Perform a GET request to display a flow + return fetch(url, { + method: 'GET', + headers: { + 'Accept': 'application/json', + 'Authorization': 'Basic YWRtaW46YWRtaW4=' + } + }) + .then(response => response.json()) + .then(data => { + let msg = "null"; + let typ = "null"; + + // Check if the flow status is "FAILED" and extract error details + if (data.flowStatus == "FAILED") { + msg = data.flowError.message; + typ = data.flowError.type; + } + + // Construct a string with the flow status responses + const flowStatusResponses = "client request ID: " + data.clientRequestId + + "\nFlow Result " + data.flowResult + + "\nFlow Error Message: " + msg + + "\nflow error type: " + typ + + "\nFlow ID: " + data.flowId + + "\nFlow status: " + data.flowStatus + + "\nHolding identity short hash: " + data.holdingIdentityShortHash + + "\nTime stamp: " + data.timestamp; + + console.log('API Result:', flowStatusResponses); + + // Display the flow status responses in the result div + document.getElementById('idResutl').innerHTML = `${flowStatusResponses}`;
+ })
+ .catch(error => {
+ console.error('Error:', error);
+ });
+}
+
+// Function to determine which flow-related action to execute based on user input
+function executeButtonFlow() {
+ // Check the value of the dropdown to determine which action to perform
+ if (document.getElementById("dropdown").value == "option1") {
+ getAllFlowResult();
+ } else {
+ oneFlow();
+ }
+}
+
+function queryDropDownChange(){
+ if (document.getElementById("dropdown").value == "option1") {
+ document.getElementById("clientID").style.display = 'none';
+ }else{
+ document.getElementById("clientID").style.display = 'block';
+
+ }
+}
\ No newline at end of file
diff --git a/kotlin-samples/sendAndRecieveTransaction/FlowManagementUI/static/css/main.css b/kotlin-samples/sendAndRecieveTransaction/FlowManagementUI/static/css/main.css
new file mode 100644
index 0000000..5e4d849
--- /dev/null
+++ b/kotlin-samples/sendAndRecieveTransaction/FlowManagementUI/static/css/main.css
@@ -0,0 +1,202 @@
+body {
+ font-family: 'Roboto', sans-serif;
+ background-color: #f4f4f4;
+ color: #333;
+ margin: 50px; /* Add margin to the entire body */
+ padding: 0;
+}
+
+h1 {
+ text-align: center;
+ color: #0e0c0c;
+}
+
+/* Style for the label */
+label {
+ display: block;
+ margin-bottom: 10px;
+ font-weight: bold;
+ color: #333;
+}
+/* Style for the dropdown button */
+select {
+ width: 20%;
+ padding: 8px;
+ margin-right: 10px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ box-sizing: border-box;
+ font-size: 14px;
+ color: #555;
+}
+
+#itemDropdown {
+ width: 40%;
+ padding: 10px;
+ box-sizing: border-box;
+}
+
+#clientID{
+ padding: 8px;
+ margin-bottom: 15px;
+ margin-right: 10px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ box-sizing: border-box;
+ font-size: 14px;
+ color: #555;
+}
+
+#OneFlowButon{
+ padding: 8px;
+ margin-bottom: 15px;
+ margin-right: 10px;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ box-sizing: border-box;
+ font-size: 14px;
+}
+
+#result {
+ margin-bottom: 10px;
+}
+
+/* Button styling */
+button {
+ background-color: #3498db;
+ color: #fff;
+ padding: 10px 25px;
+ font-size: 16px;
+ border: 2px;
+ border-radius: 15px;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+button:hover {
+ background-color: #2980b9;
+}
+
+/* Tab styling */
+.tab {
+ list-style-type: none; /* Remove default list styles */
+ display: inline-block; /* Display tabs inline */
+ padding: 2px 00px; /* Add padding to the tabs */
+ margin: 0 1px; /* Add margin between tabs */
+ cursor: pointer; /* Change cursor to pointer on hover */
+}
+
+
+.tab li {
+ flex: 1;
+ text-align: center;
+ padding: 10px;
+ background-color: #3498db;
+ color: #fff;
+ border-radius: 8px 15px 0 0;
+ cursor: pointer;
+ transition: background-color 0.3s ease;
+}
+
+.tab li:hover {
+ background-color: #2980b9;
+}
+
+/* Tab content styling */
+.tab-content {
+ display: none;
+ padding: 20px;
+ border: 1px solid #3498db;
+ border-radius: 0 0 5px 5px;
+ background-color: #fff;
+}
+
+.styled-input {
+ width: 100%;
+ padding: 10px;
+ margin-bottom: 10px;
+ box-sizing: border-box;
+}
+
+.output {
+ border: 1px solid #3498db;
+ padding: 10px;
+ border-radius: 5px;
+ background-color: #fff;
+ box-sizing: border-box;
+}
+
+#idResutl {
+ border: 1px solid #3498db;
+ padding: 10px;
+ border-radius: 5px;
+ background-color: #fff;
+ margin-top: 10px;
+ height: 290px;
+ max-height: 290px; /* Set a maximum height for the scroll box */
+ overflow-y: auto; /* Enable vertical scrolling if content exceeds the box height */
+}
+
+/* Responsive design */
+@media screen and (max-width: 600px) {
+ .tab li {
+ border-radius: 5px;
+ margin-bottom: 5px;
+ }
+ .tab-content {
+ border-radius: 5px;
+ }
+}
+#call {
+ display: -ms-inline-flexbox;
+ flex-wrap: wrap;
+
+}
+
+/* Style for side-by-side input boxes */
+.flowcall-container {
+ display: flex;
+}
+
+.input-box, .text-box {
+ width: 150px; /* Set the desired width */
+ margin-right: 10px; /* Optional: Add margin for spacing between input boxes */
+ border-radius: 5px;
+ border: 1px solid #3498db;
+}
+
+.queryoption-container{
+ display: flex;
+}
+
+
+
+#requestBody {
+ flex: 1;
+ box-sizing: border-box;
+ width: 100px; /* Set the desired width */
+ height: 300px; /* Set the desired height */
+ padding: 10px; /* Optional: Add padding for better aesthetics */
+ margin-right: 10px; /* Add some margin between the input and button */
+}
+
+#postBtn {
+ flex: 0 0 auto; /* Don't allow the button to grow or shrink */
+ margin-top: 10px; /* Add some margin between the button and result box */
+ margin-right: 10px; /* Add some margin between the button and result box */
+ width: 500px; /* Set the desired width */
+ height: 50px; /* Set the desired height */
+}
+
+#queryResult {
+ flex: 1;
+ box-sizing: border-box;
+ width: 100px; /* Set the desired width */
+ height: 300px; /* Set the desired height */
+ padding: 10px; /* Optional: Add padding for better aesthetics */
+}
+.content-box{
+ padding: 10px; /* Add padding to the content boxes */
+}
+
+
diff --git a/kotlin-samples/sendAndRecieveTransaction/FlowManagementUI/templates/index.html b/kotlin-samples/sendAndRecieveTransaction/FlowManagementUI/templates/index.html
new file mode 100644
index 0000000..44df7ac
--- /dev/null
+++ b/kotlin-samples/sendAndRecieveTransaction/FlowManagementUI/templates/index.html
@@ -0,0 +1,87 @@
+
+
+
+
+
+
+
+
+
+ Please select a flow initiator
+ + +
+
+
+
+
+
+