Page History

• Initialize the plugin by referencing the necessary files: 

  Code Block
  lang javascript
  <link rel="stylesheet" type="text/css" href="dbsyncwidget.min.css"> \\ <script src="$\{pageContext.request.contextPath\}/scripts/bootstrap.min.js"></script> <script src="dbsyncwidget.min.js"></script>

• Add div on the page: 

  Code Block
  lang javascript
  <div id="dbsyncwidget"></div>

  
  
• Add javascript initialization in the script tag:
  appName - name of application to connect. 
  validationUrl - API Url to check if application is connected
  connectUrl - API Url to connector page 

  Code Block
  lang javascript
  <script> var dbsyncwidget = null; var dbsyncButton; \\ var options = \{ appName: 'Application Name', validationUrl: 'Validation API Url', connectUrl: 'Connection API Url' \}; \\ $(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

...

<script>
var dbsyncwidget = null;
var dbsyncButton;
\\
var params = \{
	partner_key: '<%=System.getProperty("partnerKey")%>',
	partner_token: '<%=System.getProperty("partnerToken")%>',
	app_target: 'qbonline',
	username: 'TestComp001_User001',
	company: 'TestComp001',
	appId: 'qbonline',
	appName: 'QuickBooks Online',
	context: '$\{pageContext.request.contextPath\}',
	validationUrl: 'verifyProfile'
\};
\\
var options = \{
	appName: 'QuickBooks Desktop',
	validationUrl: 'http://localhost:8080/c2c/verifyProfile/TestComp001_User001',
	connectUrl: 'http://localhost:8080/c2c/qbdesktop/qbdesktop/TestComp001_User001/TestComp001'
\};
\\
$(document).ready(function () \{
	dbsyncButton = $('#dbsyncwidget');
	dbsyncwidget = dbsyncButton.dbsyncwidget(options);
\});
</script> 

Configuring Look & Feel (Optional)

...