CSS Tutorial 1 - Tips & Tricks

Hi there,

I know some of us know this but nevertheless I want to share the knowledge in this blog.

We all know JOGET Workflow depends heavily in CSS and Javascript for customization. Here are the trick on how to change the view of your application.

In this tutorial we need to use Google Chrome web browser. It is powerful tool for developer and web designer. Simple, clean and yet so heavy. Anyway here are the tricks.

1. Open your Google Chrome and open your application.
2. Go to the page that required your attention and right click, 'Inspect Element'.

 

 3. Then copy your tested CSS and paste it to your form builder / userview builder in the CSS section properties. Good luck.

Form Tutorial 4 - Geolocation Feature using Google Maps

Hi there,

I try something last week where i put geolocation  in mt JOGET form. First it was hard but luckily i found some sample that i can use using Google ( I <3 U).

Here are the codes and paste it into joget form using 'Custom HTML' element:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

<article>
<p>Finding your location: <span id="status">checking...</span></p>
</article>
 
<script>
function success(position) {
var s = document.querySelector('#status');
 
if (s.className == 'success') {
// not sure why we're hitting this twice in FF, I think it's to do with a cached result coming back   
return;
}
 
s.innerHTML = "found you!" + "<br/>Latitude:" + position.coords.latitude + "<br>Longitude: " + position.coords.longitude;
s.className = 'success';
 
var mapcanvas = document.createElement('div');
mapcanvas.id = 'mapcanvas';
mapcanvas.style.height = '400px';
mapcanvas.style.width = '800px';
   
document.querySelector('article').appendChild(mapcanvas);
 
var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
var myOptions = {
zoom: 15,
center: latlng,
mapTypeControl: false,
navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
 
var marker = new google.maps.Marker({
      position: latlng,
      map: map,
      title:"You are here! (at least within a "+position.coords.accuracy+" meter radius)"
  });
}

function error(msg) {
var s = document.querySelector('#status');
s.innerHTML = typeof msg == 'string' ? msg : "failed";
s.className = 'fail';
 
// console.log(arguments);
}

if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success, error);
} else {
error('not supported');
}

</script><a id="html5badge" href="http://www.w3.org/html/logo/">
</a>
</section>
<script src="js/prettify.packed.js"></script>
<script>
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script>
try {
var pageTracker = _gat._getTracker("UA-1656750-18");
pageTracker._trackPageview();
} catch(err) {}</script>

<script>
$('input[name=latitude').val(position.coords.latitude); 
$('input[name=langtitude').val(position.coords.longitude);
</script>

Below is my result:

Note: The system read the location based on IP address. So it may not accurate. Read Google description about this feature

Datalist Tutorial 3 - Customize CSS

Hi there,

Have you ever feel boring? seeing the static datalist in JOGET by default? boring like below with nothing interesting?

We will change that. using CSS we can do everything (well, not everything) to customize the feature. Here are the steps:

1. Find the location of the CSS file for userview: apache-tomcat-7.0.39\webapps\jw\css\datalistBuilderView.css
2. Open with Notepad++
3. by putting the ': hover' code for the datalist table, you can change the interface of your datalist.
Source Code CSS: Click Here

Form Tutorial 3 - Customize Print Feature

Hi there,

Do you realized the small link at the bottom of your form page? OK please start your JOGET server and open one of your form. You will see something like this:

Try click it (Using Google Chrome because it has Print View function, good stuff but eats too much memory, making it sucks) and you will get something like this:

Why JOGET? Why did you do this to me???

OK now we will change it. Here is how:

1. Go to JOGET Installation folder.
2. Search this folder: apache-tomcat-7.0.39\webapps\jw\css
3. Pick this little fella: userview_print.css
4. Open it using Notepad++ and change the CSS into something below

CSS Code:

#header, #footer, #navigation, #adminBar {
    display: none !important;
}

#main, #content, #page {
    position:fixed;
    left: 0;
    top: 0;
    border:0;
}

.print-button{
    display: none;
}

.adminBarButton {
    display: none;
}

5. And now let's try to print it once again. there you go...

Form Tutorial 2 - Multi Page Form Element

 Hi there,

Assuming that you have multiple of forms created in JOGET, you can put all of the forms inside Multi Page Form Element. How?

1. Assuming that you have the forms ready, create new FORM (bird eye view) and go to FORM BUILDER, Drag the 'Multi Page Form' Element into Section
2. Click 'edit' and you can see the properties below:

3. Select the number of page that you required (in this case, 3)
4. Click 'Show Advanced Button'. Select you preferred form for each tab's form

5. You will get the following screens but no matter. Save it!

6. Go to USERVIEW BUILDER. Drag FORM element into your preferred category, click 'edit' and select your form (bird eye view). Do not forget to rename it and Save!

7. Below is the result.

Workflow Designer Tutorial 1- Naming Tutorial

 Hi there,

To changing the labeling of your activity task, you can apply the #hash variable in your activity box in the Workflow Designer as below:

you can refer to the list of #hash variable in the Joget knowledge base: CLICK HERE

The result is as follows:

Userview Tutorial 1 - SQL Chart Tutorial

 Hello there,

Today i will show you on how JOGET handle Charts and Graphs as below:

1. Open your userview tab
2. Select and drop the 'SQL Chart' element in the 'category' area
3. Click 'edit'
4. Fill in the information as you desired (see below)

5. Put your database URL link (you can fine the default JOGET's Database connection URL at System Setting)

6. Click 'Show Advance Option' button and paste the following MySQL query

SELECT <column name1>, COUNT(*) FROM <table name> GROUP BY <column name1>;

7. Done! and the result

Form Tutorial 1 - How to remove 'Save As Draft' button & 'Submit' button

 
Tips & Notes



To hide the “Save as Draft” button, drag a custom HTML into your submission form and add this jQuery:

<script language='text/javascript'>
$(document).ready( function() {
$('#saveAsDraft').remove();
});
</script>

Other hide button scripts for “Submit” and “Complete” are:

<script language='text/javascript'>
$(document).ready( function() {
$('[name=submit]').hide();
$('#submit, #assignmentComplete').hide(); });
</script>

To renaming the labels & buttons to Bahasa Malaysia, add this to Userview Javascript field:

<script language='text/javascript'>
$(document).ready( function() {
$("#submit").val(" <YOUR VALUE> ");
$("#assignmentComplete").val(" <YOUR VALUE> ");
$("#cancel").html(" <YOUR VALUE> ");
$(".print-button").html(" <YOUR VALUE> ");
$("#saveAsDraft").hide();
} );
</script>

See the magic happens, the 'Save As Draft' button is gone =)