[Tutorial] Howto use ajax with sugar

[fedepia]

Hello people, I always ask my self how to embed ajax within sugar, it is to look at an EditView of a contact and to do some action without refreshing the browser. Well, after a little study, I could do it, so I will share it with you how to add ajax in sugar.

I will explain how to add to an EditView a buttom that when we click on it, it executes a php application and bring its content. The invocation to that php file will be using YUI (yahoo user interface). The idea is, when we press the button, it will call an external php that will execute its code and it will get a param from sugar.

First at all, we have to install an exelent module developed by patrizio gelosi named EnhancedStudio, This module adds a new type of field named 'Code' field, that will help us to add php code and a lot of things more.

After install this module, we have to add the code field to the editview of contacts module, to do this we have to:
1- Go to Admin->Studio->Contacts->Fields. We have to add a new 'Code' field name 'yui_test'
2- We have to add the following code:

 echo '
<script>
function invoke() {
    alert("Button clicked!");
    var callback = {
        success: function(o) {
            document.getElementById("div_info").innerHTML = 
                o.responseText;
        }
    }
    
    var connectionObject = YAHOO.util.Connect.asyncRequest ("GET", "http://localhost/sugarcrm/my_app.php?name=' . $bean->first_name . '", callback);
}
</script>  
 
<input type="button" id="boton" name="button" value="Execute PHP" onclick="invoke();">
 
<div id="div_info">
<b>this will change...</b>
</div>
'; 
  

3- After add this content, we must save changes and add this field to the editview of contacts. To do this, we have to go to Contacts->Layout->EditView, search for our new field named "yui_test" and drag it to the template.
4- Finally, we must create the file to be invoked. To do this we must create "my_app.php" within sugarcrm root directory. The content is the following:

 echo "<h2>The contact name is: " . $_REQUEST['name'] . "</h2><br>";
for ($i=0; $i < 5; $i++) {
    echo "Hello world! $i<br>";
}
echo '<br><br><br><br><br><iframe src="http://es.wikipedia.org/wiki/Iframe"
      width="400" height="500" scrolling="auto" frameborder="1" transparency>
      <p>Alternative text for iframe.</p>
    </iframe>
'; 
  

5- Ready! It's done. We were a little more ambitious, because we passed the name of the contact by GET to our application, our app will show the name of the contact, also will print five 'hello world' and finally we will show wikipedia within the contact detail.

With all of this, I wanted to show the potential and ease at time to add code in sugar

If you have any problem with the code, let me know and I'll try to help you.

Cheers and sorry for the horrible english!

[DragonflyMaster]

This is great!
Thank you Fedepia

[DragonflyMaster]

4- Finally, we must create the file to be invoked. To do this we must create "my_app.php" within sugarcrm root directory. The content is the following:

   echo "<h2>The contact name is: " . $_REQUEST['name'] . "</h2><br>";
  for ($i=0; $i < 5; $i++) {
      echo "Hello world! $i<br>";
  }
  echo '<br><br><br><br><br><iframe src="http://es.wikipedia.org/wiki/Iframe"
        width="400" height="500" scrolling="auto" frameborder="1" transparency>
        <p>Alternative text for iframe.</p>
      </iframe>
  '; 
  

Small note:
php code in my_app.php should be inside <?php ?> tags.

[Qamrun]

Its perfectly working.

Thanks a lot Fedepia

[vishwasrao]

Hi,
It seems to be great.
But i dont have full version of enhanced studio.
Does it work with demo version.?

[kenshiro]

Hi,
It seems to be great.
But i dont have full version of enhanced studio.
Does it work with demo version.?

Yes it is.
Only that you cannot use it in a user-defined Module.

[Nomi13ok]

Looks good for instance

[lovebyte27]

Hi,

Not sure if anyone is monitoring this thread anymore, but here goes.

I am running SugarCE 5.2.0d with the Enhanced studio demo 2.2.1 and when I try to execute the Create Contacts, I get the following error : yui test: Feature available in the FULL Version only.

Is there a perticular reason for this?

Actually, I have tried to run other custom code in this manner and I always get the same error.

Thanks

[kenshiro]

Hi,

Not sure if anyone is monitoring this thread anymore, but here goes.

I am running SugarCE 5.2.0d with the Enhanced studio demo 2.2.1 and when I try to execute the Create Contacts, I get the following error : yui test: Feature available in the FULL Version only.

Is there a perticular reason for this?

Actually, I have tried to run other custom code in this manner and I always get the same error.

Thanks

That's because CODE fields are evaled on a "Create Contact" event in the FULL version only.

Please refer to the last version of the Admin's Manual from the Enhanced Studio Download Page for a complete list of the DEMO / FULL features.

[tai.nguyen862020]

Dear All,

Please. help me about error .

when i executed all step above, but At EditView Layout page occur 1 message error:

Feature available in the FULL Version only.

Thanks & Best Regard.