How can we help you?
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Dropdown css -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="drop-down">
<div class="selected">
<a href="#"><span>Please select <i class="arrow"> ⌄ </i></span></a>
</div>
<div class="options">
<ul>
<li><a href="#">User1<span class="value">1</span></a></li>
<li><a href="#">User2<span class="value">2</span></a></li>
<li><a href="#">User3<span class="value">3</span></a></li>
</ul>
</div>
</div>
<!-- Dropdowm JS -->
<script src="./dropdown.js"></script>
</body>
</html>
.drop-down .selected a {
background: #fff no-repeat scroll right center;
display: block;
padding-right: 20px;
border: 1px solid #d7d7d7;
width: 150px;
border-radius: 2px;
text-decoration: none;
color: #3179ac;
}
.drop-down .selected a span {
cursor: pointer;
display: inline;
padding: 5px;
}
.drop-down .options {
position: relative;
margin-top: -17px;
}
.arrow {
position: relative;
left: 30px;
}
.drop-down .options ul {
background: #fff none repeat scroll 0 0;
display: none;
list-style: none;
padding: 0px 0px;
position: absolute;
width: auto;
min-width: 170px;
border: 1px solid #d7d7d7;
}
.drop-down .selected span.value,
.drop-down .options span.value {
display: none;
}
.drop-down .options ul li a {
padding: 5px;
display: block;
text-decoration: none;
color: #3179ac;
}
.drop-down .options ul li a:hover {
background: #3179ac;
color: #fff;
transition: 0.2s ease;
}
.drop-down .selected span.value,
.drop-down .options span.value {
display: none;
}
.drop-down .options ul li a {
padding: 5px;
display: block;
text-decoration: none;
}
.drop-down .options ul li a:hover {
background: #3179ac;
color: #fff;
transition: 0.2s ease;
}
//TOGGLING NESTED ul
$(".drop-down .selected span").click(function () {
$(".drop-down .options ul").toggle();
});
//SELECT OPTIONS AND HIDE OPTION AFTER SELECTION
$(".drop-down .options ul li a").click(function () {
let options = $(this).html();
$(".drop-down .selected a span").html(options);
$(".drop-down .options ul").hide();
});
//HIDE OPTIONS IF CLICKED ANYWHERE ELSE ON PAGE
$(document).bind('click', function (e) {
var $clicked = $(e.target);
if (!$clicked.parents().hasClass("drop-down"))
$(".drop-down .options ul").hide();
});
- You need to link JQuery css and javascript in your project
- Create your own custom javascript so that you can target the element that you want to apply JQuery UI on.
JQuery css
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
JQuery javascript
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<select name="cars" id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Make sure this script is linked after the JQuery scripts above
$(function () {
$("#cars").selectmenu(); // If you have multiple dropdowns, you can use the same class name on your dropdowns
});
If you are unable to find your microApp on your Android device after installing the Ayoba Developer APK, please ensure that you have configured the microApp to be available in the country where you are located. Additionally, make sure that you are accessing the microApp from a location where it was configured to be available.
Yes, the visibility of microApps is dependent on the location of the user. To make your microApp available in specific countries, you need to indicate those countries on the devportal website. If the desired countries are not on the list, please contact our team, and we will assist you in making your microApp available in those countries.
No, not including a chat URL will not cause any issues as long as your web app does not have a chat feature.
If the links inside your microApp are not working, it may be due to URLs that are different from your main URL or Discovery URL. You can whitelist any domains or subdomains that require access to external links in your microApp by sending them to ayobasupport@thedigitalacademy.co.za.
The required URL that you need to have is the Discovery URL, which is the web address that points to your website. If you are currently running your application on your local machine, you will need to host it online to get a publicly available URL to integrate with Ayoba.
To test your app on the Ayoba platform, you need to have a publicly available URL that points to your application. Ayoba does not automatically connect your app to its API or host your application. Please note that Ayoba microApps work by rendering a publicly available HTTP/HTTPS URL in an in-app browser.
After creating a microApp on devPortal, our team will provide you with the necessary information to download and install the Ayoba Developer APK, which is the Ayoba testing environment. You can then test your microApp in a live environment.
Your app does not need to be available on Google Play Store. However, if you want to allow Ayoba users to download your APK package, we recommend creating a web application with functionalities that enable users to download and install the APK package.
If your app is not executing the api Ayoba getMsisdn function correctly or any other functions related to pulling a user’s details, please ensure to implement the onPresenceChanged with the code snippet below :
onPresenceChanged(presence)
This function allows the Ayoba Apk to detect if the user has loaded the app inside Ayoba then enables other functions to get executed.