2022
<link rel="stylesheet" type="text/css" href="dbsyncwidget.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://av-web.s3.amazonaws.com/ecw/dbsyncwidget.min.js"></script>
<div id="dbsyncwidget"></div>
<script> var dbsyncwidget = null; var dbsyncButton; var options = { appName: 'Application Name', validationUrl: 'https://<your-embedded-server/', connectUrl: 'https://<your-embedded-server/'}; $(document).ready(function () { dbsyncButton = $('#dbsyncwidget'); dbsyncwidget = dbsyncButton.dbsyncwidget(options); });
4. (Optional: Customizing DBSync widget look & feel)
To change dbsyncwidget button we can override the next css classes:
dbsync-widget-logo - css class which describes styles of the button in case of validation is not successful
dbsync-widget-logo-connected - css class which describes styles of the button in case of validation is successful
To change the size of modal window we can override:
modal-large - css class which describes dimension styles of modal window
Example of using dbsyncwidget in c2c:
<link href="${pageContext.request.contextPath}/css/dbsyncwidget.min.css" rel="stylesheet" />
<script src="${pageContext.request.contextPath}/scripts/bootstrap.min.js"></script>
<script src="${pageContext.request.contextPath}/scripts/dbsyncwidget.min.js"></script>
<div id="dbsyncwidget"></div>
<script> var dbsyncwidget = null; var dbsyncButton; var options = { appName: '<Display Label of the Connecting App>', validationUrl: 'https://<your_server>/ecw/verify/<appid>/<company>/<username>', connectUrl: 'https://<your_server>/ecw/connect/<appid>/<company>/<username>' }; $(document).ready(function () { dbsyncButton = $('#dbsyncwidget'); dbsyncwidget = dbsyncButton.dbsyncwidget(options); }); </script>
<link href="$\{pageContext.request.contextPath\}/css/style.css" rel="stylesheet" /> \\ Content of styles.css: .modal-large \{ width: 60%; \} .dbsync-widget-logo \{ outline: none; text-decoration: none; border: none; background: url(../images/logo.png) no-repeat 0 0; width: 100px; height: 30px; display: inline-block; margin: 5px; \} .dbsync-widget-logo:hover \{ filter: brightness(105%); \} .dbsync-widget-logo-connected \{ outline: none; text-decoration: none; border: 2px; background: url(../images/logo-connected.png) no-repeat 0 0; width: 100px; height: 38px; display: inline-block; margin: 5px; \} .dbsync-widget-logo-connected:hover \{ filter: brightness(105%); \}