Sugar 7 structure is totally different from previous versions. Sugar 7 is client side structured. To create custom view in sugar 7 you have to create a directory in client base directory .here is path and code for custom view
custom/clients/base/views/my-view/my-view.hbs
<style>
 
    div.my-view
    {
        padding-top: 5%;
    }
 
    div.my-view .sugar-cube
    {
        fill:#bbbbbb;
        height:200px;
 
        width:200px;
        display: inline;
    }
 
</style>
 
<h1>My View Aafi</h1>
 
{{{subFieldTemplate ‘sugar-cube’ ‘detail’ cubeOptions}}}
 
<p>Click to spin the cube!</p><br>
 
<select id=’imagedropdown’ class=’imagedropdown’>
  <option value=””>Select a Vehicle</option>
  <option value=”car”>Car</option>
  <option value=”bike”>Bike</option>
  <option value=”plane”>Plane</option>
  <option value=”bus”>Bus</option>
</select>
<select id=’secondDiv’ class=’secondDiv’>
  <option value=””>Select second div</option>
  <option value=”second”>Second Div</option>
</select>
 
<div id=’displayimage’>
</div> 
 Here is js file to handle events.
custom/clients/base/views/my-view/my-view.js
({
    className: ‘my-view tcenter’,
 
    cubeOptions: {
        spin: false
    },
 
    events: {
        ‘click .sugar-cube’: ‘spinCube’,
‘change .imagedropdown’ : ‘imagefun’,
‘change .secondDiv’ : ‘secondDiv’,
    },
imagefun: function() {
        var val = $(“#imagedropdown option:selected”).val();
$(“#displayimage”).html(“<img width=’304′ border=’1′ height=’228′ src=’custom/themes/default/images/”+val+”‘>”);
},
secondDiv: function() {
        var val = $(“#secondDiv option:selected”).val();
if(val == ‘second’) {
//$(“#displayimage”).html(“<img width=’304′ border=’1′ height=’228′ src=’custom/themes/default/images/”+val+”‘>”);
console.log(‘aaaaaaaaa’);
//$this->view = ‘second-view’;
this.render(‘second-view’);
}
else {
alert(‘div not selected’);
}
},
 
    spinCube: function() {
        this.cubeOptions.spin = !this.cubeOptions.spin;
        this.render();
    },
})

Leave a Reply

Your email address will not be published. Required fields are marked *