Advanced Configuration

The Query Builder's look and behavior can be significantly modified via its configuration options. In the previous example, you've seen some simple modifications, now let's do something more advanced.

Example

In the following example we've changed the following default settings in the Query Builder:

  • The animation speed.
  • The min, max, and default value of the age selector.
  • The map field selection color and stroke.
  • The selectable languages and their names.

<script type="text/javascript">
$(function() {
JCSDL.onLoad(function() {
$('#jcsdl-edit').jcsdlGui({
                        ...
                        animate : 2000,

                        hideTargets : ['interaction', 'facebook', 'myspace', '2channel', 'video', 'youtube', 'reddit', 'imdb', 'flickr', 'amazon', 'blog', 'board', 'dailymotion', 'newscred', 'topix', 'augmentation',
                    'twitter.domains', 'twitter.in_reply_to_screen_name', 'twitter.links', 'twitter.mentions', 'twitter.source', 'twitter.text', 'twitter.place', 'twitter.retweet', 'twitter.retweeted',
                    'twitter.user.description', 'twitter.user.followers_count', 'twitter.user.follower_ratio', 'twitter.user.friends_count', 'twitter.user.id', 'twitter.user.listed_count', 'twitter.user.location', 'twitter.user.name', 'twitter.user.screen_name', 'twitter.user.statuses_count', 'twitter.user.time_zone', 'twitter.user.url'],
                      definition : {
                          inputs : {
                               select : {
                                   sets : {
                                       language2 : {'nl': 'Dutch', 'de': 'German', 'hu': 'Hungarian'}
                                   }
                                }
                          },
                          targets : {
                              twitter : {
                                  fields : {
                                      user : {
                                          fields : {
                                              profile_age : {
                                                  max : 100,
                                                  'default' : 40,
                                                  step : 1
                                              },
                                              lang : {
                                                  optionsSet: 'language2'
                                              }
                                          }
                                      }
                                  }
                              }
                          }
                      },
                      mapsOverlay : {
                          strokeWeight : 1,
                          fillColor : '#FF0000',
                          fillOpacity : 0.3
                      }
                      ...
</script>

The result