Custom Picklist lookup using javascript in Visual page

In this post I'm gonna show you how to create simple custom picklist lookup in Visual page using javascript.

We will use window eventlistner to get data from child window open by parent window.

Here is snippet of my simple vf page.

  
<apex:page >
    <script>
        function open_pop_up(idx, field, sObj){
            var child = window.open('/apex/picklistLookup?idx='+idx+'&field='+field+
'&sObj='+sObj+'', '_blank', 
'toolbar=yes,scrollbars=yes,resizable=yes,top=500,left=500,width=400,height=400')
            console.log('==> Child: ' + child);
        }
        
        var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
        var eventer = window[eventMethod];
        var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";
    
        //Listen to message from child window
        eventer(messageEvent,function(e) {
            console.log('parent received message!: ',e.data);
            var dataArr = e.data.split(':'); 
            var elmtId = e.data.substring(0, e.data.lastIndexOf(':'));
            var datavalue = e.data.substring(e.data.lastIndexOf(':') + 1,e.data.length);
            document.getElementById(elmtId).value = datavalue;
        },false);  
        
    </script>
    
    <input id="testId" value="" onclick="open_pop_up('testId','CustomerPriority__c',
'Account');"/>
</apex:page>

Let me explain the code.

when we click on input it will open popup lookup window.
Here i have use my custom picklist field CustomerPriority__c of Account Object for test data.

Now new vf page for lookup popup window.

  
<apex:page controller="PicklistLookupCon" showHeader="false">

    <apex:variable value="{!0}" var="rowNum"/>
    
    <table>
        <tr>  
            <td></td>  
            <td>
                <input type="button" value="Insert Selected" onclick="InsertSelected()" class="btn"/>

            </td>
        </tr>
        <apex:repeat value="{!picklistValues}" var="plv">
            <tr>
                <td>
                    <input type="checkbox" onclick="selectValue('{!rowNum}', this.checked, '{!plv}')"/>
                </td>
                <td>{!plv}</td>
            </tr>
            <apex:variable value="{!rowNum+1}" var="rowNum"/>             
        </apex:repeat>            
    </table>
    
    <script type="text/javascript">
        var arrValue  = new Array();
               
        function selectValue(id, isChecked, value){

            if(isChecked == true){
                arrValue[arrValue.length] = value;
            }else{
                var index = arrValue.indexOf(value);
                arrValue.splice(index,1);
           }  
        }
           
        function InsertSelected(){
            console.log(window.parent.opener);
            var win = window.parent.opener;
            var dataStr= '';
            
            for(var k=0;k<arrValue.length;k++){
                if(k==0) dataStr = arrValue[k];
                else dataStr +=','+arrValue[k];
            }
            win.postMessage('{!$CurrentPage.parameters.idx}:'+dataStr, window.parent.opener.location.href); 
            window.parent.close();
        }
  </script> 
</apex:page>

controller:

public without sharing class PicklistLookupCon {

    string sObj = Apexpages.currentpage().getParameters().get('sObj');
    string field = Apexpages.currentpage().getParameters().get('field');

    public picklistLookupCon(){
    
    }
        
    public List picklistValues{
      get{
          if(picklistValues!=null)
              return picklistValues;
          else{
              picklistValues = new List();
              
              Map gd = Schema.getGlobalDescribe(); 
              Schema.SObjectType ctype = gd.get(sObj);
              Map fmap = ctype.getDescribe().fields.getMap();
              Schema.DescribeFieldResult fieldResult = fmap.get(field).getDescribe();
              List ple = fieldResult.getPicklistValues();   
              
              for( Schema.PicklistEntry f : ple){
                  picklistValues.add(f.getValue());
             }
          }
          return picklistValues;
      }
      set;
    }
    
 }

That's it.

Yepppieee you done it.

Simple Alexa skill in Node.js using Heroku as hosting server

The think which we gonna need is;
1. Heroku login
2. Git respository
3. Amazon developer account

We will use command promt for developing node js code and deploying it to heroku.

Here are the links for download CLI for heroku and gitHub/
GitHub: https://git-scm.com/download/
Heroku cli: https://devcenter.heroku.com/articles/heroku-cli

First of all create a new directory in local machine name it whatever you like, i have given name sample. Similar create a new repository in your git account.you will below screen:




Go through the given step for creating a new respository on the command line

for using alexa we will use alexa-app-server library.

for using node js you will need node js to be install so first install npm to your local machine.
https://nodejs.org/en/download/

For installing alexa-app-server type:

npm install alexa-app-server

after finishing installing alexa-app-server lib, Create a file server.js and copy paste below code in it.

'use strict';

var AlexaServer = require( 'alexa-app-server' );

var server = new AlexaServer( {
 httpsEnabled: false,
 port: process.env.PORT || 80
} );

server.start();

Let me explain what does code means.

Here we have set port to be used by server. if code is running from heroku than it will use  port given by heroku by (process.env.PORT) other wise port 80 will be use.

Now we will create Procfile. this will tell heroku what to do when process will run.file name should be without extension. just use Procfile.

web: node server.js

Now will create Package.json file by tying npm init
this will ask some question and after completing that json file will get created.

After that push your file to git by performing below command.

git add .
git commit -m "added procfile and server.js"
git push origin master

Now, create new folder in main folder named apps and in that create sub folder skills  where add file for our skills.create new Github repository for skills name it whatever you like i use sampleskills.
perform similar step of initiaze repo and do the initial commit/push.Now we will indicate github that apps/skills is submodule. To do this go to main folder and type

git submodule add https://github.com/rsanjuseason/sampleskills.git apps/skills

Replace https://github.com/rsanjuseason/sampleskills.git with your skill git link.

Now we will generate package.json for skills folder.so that npm can know that it submodule.
To do this run below command:

npm init

Now we will install alexa-app package.

npm install alexa-app

Now again regenerate package.json for install dependency.

Now it's time to create index.js file for performing something by skill, something like say hello world.

module.change_code = 1;
'use strict';

var alexa = require( 'alexa-app' );
var app = new alexa.app( 'myskill' );


app.launch( function( request, response ) {

        response.say( 'Welcome to Alexa World' ).reprompt( 'Ask Something.' ).shouldEndSession( false );

} );


app.error = function( exception, request, response ) {
 response.say( 'Sorry some error occured ' + error.message);
};

app.intent('sayHello',
  {
 "utterances":[ 
  "say Hello",
  "Hello alexa",
  "What's up",
  "Hey alexa"]
  },
  function(request,response) {
    response.say("Hello, Welcome to alexa world.");
  }
);

module.exports = app;

To test our code run below command in cmd from main folder:

node server.js

Then, open browser and open below link:

localhost/alexa/myskill



Hope this works, then we will deploy it heroku so, that it can invoke from any place.

So, now we will commit our work to git.
first commit/push skill files to git.move to skill directory and type:

git add .
git commit -m "skills file index.js"
git push origin master


then we will push out main folder files to git by below commands after moving to main directory:

git submodule forech git pull origin master
git add .
git commit -m "update submodule"
git push origin master

Now create New app in heroku to deploy our files.Mine is helloworldskill

after creating app type below command

heroku login

After this you have enter your login details then,

heroku git:remote -a helloworldskill

Replace helloworldskill  with your app name.then push your file.

git push heroku master


Now its time create skill on amazon.go to your developer amazon and create a new skill



Add intent schema and utterences.


In configuration tab select Https and below url 

https://helloworldskill.herokuapp.com/alexa/myskill

Replace https://helloworldskill.herokuapp.com with your heroku app url.



In SSL Certificate select

My development endpoint is a sub-domain of a domain that has a wildcard certificate from a certificate authority

Now its time test our skill, enter utterance it should work fine.



You can test it in simulator or echo dot.
Here is link for simulator

https://echosim.io

Just Say

"alexa, Ask helloworld to say hello"

it will repeat back with

"Hello, welcome to alexa world"

Yehhhh, we have created our first alexa skill.

Hope this helps
Thanks.

Simple Status Loader with simple Html salesforce

A simple status loader image can be easily done using simple html div tag.

Here is code snippet for it.

<div id="loading" style="display:none;">
  <div style="width: 100%; height:100%; background:#000; opacity: 0.4; top:0px; left:0px; 

      position: fixed; z-index:1000000;"></div>

     <div class="dv_load" style="position:fixed;top:40%;left:50%;z-index:1000000">
        <img src="/img/loading24.gif" style="vertical-align:middle;" />
        <span>Loading...</span>
      </div>
</div>

you can load is just by changing its display property that is display:none to block.

function startProcess() {
   document.getElementById("loading").style.display = 'block';
}
    
function endProcess() {
    document.getElementById("loading").style.display = 'none';
}

function startprocess for loading image and stopprocess for stop i.e to hide.

If have any questions, you can as in comment.

Thanks.
Have happy coding.