• If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

Announcement

Collapse
No announcement yet.

[HELPED] Retrieving additional parameters on dropdown list when calling RPG

Collapse
X
Collapse
 
  • Page of 2
  • Filter
  • Time
  • Show
Clear All
new posts
Previous 1 2 template Next
  • #1

    [HELPED] Retrieving additional parameters on dropdown list when calling RPG

    Hi,

    Is it possible to retrieve additional parameters from a dropdown list when calling a RPG program?

    For example, I would like to retrieve a list the the drop down of "package descriptions" a "packages code" and a "package cycle value".

    I am successfully using "VVREC" and "VVVALUE" to retrieve the code and description, but do not know what to use to pass the cycle value.

    Any help would be appreciated.

    Cheers
    Tags: None
  • #2
    If you include other fields in your store, you can access them. A good time to do this is on the select listener which will pass you parameters of the combo, the selected record and other things.

    Comment

    • #3
      In the ILE, I am successfully passing the VVREC and VVVLAUE for the description and code using the following below, however what do I use to pass the cycle I require?


      comboDS(cnt).vvrec=%trim(PackageListDS.PackageList (cnt).Description);
      comboDS(cnt).vvvalue=%trim(PackageListDS.PackageLi st(cnt).PackageCode);

      Comment

      • #4
        Either create a different data structure to hold your data or send the data back using a sql statement via vvOut_execSqlToJson.

        Comment

        • #5
          Last edited by SASIT; 11-13-2013, 03:40 PM.

          Comment

          • #6
            Do you really want vvrec and vvvalue to be graphic fields?

            Comment

            • #7
              Not particularly. This was based on the dds (vvgends1) and code provided in the Valence examples. This works fine until I and the additional field definition of VVCYCLE

              Comment

              • #8
                Maybe post the source for the combo...

                Comment

                • #9
                  Here is the source of the combo and form. Ideally I want to be able to select a "Coverage Type" from the drop down (displaying VVREC). once selected use the VVCYCLE value to increment the EndDate on the form by x months.

                  Code:
                  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Copyright" content="Copyright 2008-2012 CNX Corporation, All Rights Reserved">
<title>BVS New Vehicle.</title>
<link rel="stylesheet" type="text/css" href="/extjs4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/vvresources/valence.css" />
<link rel="stylesheet" type="text/css" href="/html/AA/assets/style.css" />
<script type="text/javascript" src="/extjs4/ext-all.js"></script>
<script type="text/javascript" src="/vvresources/valence-extjs4.js"></script>
<script type="text/javascript">
    
// Ext.onReady delays execution until page is fully loaded into memory
//
Ext.onReady(function() {  
 // Define the models for our stores
    globalVarCustomer = '0777269';
 // Define the models for our stores
    // 
    Ext.define('cuspackage',{
        extend: 'Ext.data.Model',
		fields: [{
			name: 'VVREC',
			type: 'string'
		},{
    		name: 'VVVALUE',
			type: 'string'
		},{
        	name: 'VVCYCLE',
			type: 'string'
		}]
	});
	
	var cuspackageStore = Ext.create('Ext.data.Store',{
    	model : 'cuspackage',
		proxy : {
			type : 'ajax',
			url  : 'vvcall.pgm',
			extraParams : {
				pgm: 'BVSNEWVH',
				action: 'getCusPackagesList',
                cusno: globalVarCustomer
			},
			reader : {
				type : 'json',
				root : 'VVGENDS1'
			}
		}
	});
    var formMain = Ext.create('Ext.form.FormPanel', {
    	renderTo: 'formMain',
		width: 550,
		frame: true,
		bodyPadding: 10,
		iconCls: 'application_view_detail',
		title: 'Test form',
		defaults: {
			xtype: 'textfield',
            enforceMaxLength: true,
			labelAlign: 'right',
			labelWidth: 110,
			width: 500
			
		},
		items: [{
			xtype: 'displayfield',
			itemId: 'MSG',
            fieldLabel: ':',
			msgTarget: 'under'
		},{
        	xtype: 'textfield',
			id: 'REGO',
			fieldLabel: 'Registration',
			maxLength: 6,
            fieldStyle: 'text-transform:uppercase'
            
		},{
    		xtype: 'textfield',
			id: 'MAKE',
			fieldLabel: 'Make',
			maxLength: 10
		},{
    		xtype: 'textfield',
			id: 'MODEL',
			fieldLabel: 'Model',
			maxLength: 10
		},{
        	xtype: 'textfield',
			id: 'DRIVER',
			fieldLabel: 'Drivers name',
			maxLength: 30
		}, {
            xtype: 'combo',
			id: 'CUSPACKAGE',
			fieldLabel: 'Coverage Type',
            emptyText:'Select coverage type',
			forceSelection:true,
			displayField:'VVREC',
            valueField: 'VVVALUE',
            editable: false,
			store:cuspackageStore
		}, {
         xtype: 'datefield',
        anchor: '75%',
        fieldLabel: 'Start Date',
        id: 'STARTDATE',
        format: 'd/m/Y',
        value: new Date()   // defaults to today
    }, {
        xtype: 'datefield',
        anchor: '75%',
        fieldLabel: 'End Date',
        id: 'ENDDATE',
        format: 'd/m/Y',
        minValue: new Date(),
        value: Ext.Date.add (new Date(),Ext.Date.MONTH,12)
    },{
            xtype: 'textfield',
			id: 'VIN',
			fieldLabel: 'VIN #',
			maxLength: 20
		} ],
		buttons: [{
			text: 'Load',
			iconCls: 'accept',
			handler: function() {
				getCustomerRecord();
			}
		}]
	});

	// the following function will call an RPG program when user clicks "Go" or presses the ENTER key
	//
	
		
	

});
</script>
</head>
<body>
<div style="margin-left: auto ; margin-right: auto ; width:550px">
<table>
  
  	<td><br><div id="formMain"></div></td>
  </tr>
  
</table>
 
</div>
</body>
</html>
                  Last edited by robert.swanson; 11-18-2013, 01:58 PM. Reason: add #CODE tags

                  Comment

                  • #10
                    Nothing stands out to me...although I would change your data structure from graphic to character. Graphic fields must be "decoded" by the front-end via Valence.util.decodeUTF16.

                    Comment

                    • #11
                      Still no luck. Can you advise, do I need to change the reference below if the data structure is changed? What does this definition refer to?

                      reader : {
                      type : 'json',
                      root : 'VVGENDS1'

                      Comment

                      • #12
                        SASIT,

                        If your already passing VVCYCLE then you could grab it from the record on the front-end via the select listener off the combo.

                        Below is a quick example

                        Code:
                        // The data store containing the list of states
var states = Ext.create('Ext.data.Store', {
    fields: ['VVVALUE', 'VVREC', 'VVCYCLE'],
    data : [
        {"VVVALUE":"AL", "VVREC":"Alabama", "VVCYCLE":"Test Cycle"},
        {"VVVALUE":"AK", "VVREC":"Alaska", "VVCYCLE":"Test Cycle 2"},
        {"VVVALUE":"AZ", "VVREC":"Arizona", "VVCYCLE":"Test Cycle 3"}
        //...
    ]
});

// Create the combo box, attached to the states data store
Ext.create('Ext.form.ComboBox', {
    fieldLabel: 'Choose State',
    store: states,
    queryMode: 'local',
    displayField: 'VVREC',
    valueField: 'VVVALUE',
    renderTo: Ext.getBody(),
    listeners : {
        scope  : this,
        select : function(cmp, recs){

            var vvCycle = recs[0].get('VVCYCLE');
            //after user selects a record on the combo pull the 
            // VVCYCLE value and display it in the console
            //
            console.log(vvCycle);
        }
    }
});

                        Comment

                        • #13
                          Thanks Johnny.

                          Next question. I am now getting VVCYCLE back and would like to do the following?

                          - When a COVERAGE TYPE has been selected (which has the hidden VVCYCLE value) .....

                          - Increment the ENDDATE field by the VVCYCLE value in months from the STARTDATE (which defaults to the current date)
                          - If the STARTDATE is changed, then update the ENDDATE accordingly as above

                          Any help would be appricated. Have pasted my current code below *****


                          Code:
                          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Copyright" content="Copyright 2008-2012 CNX Corporation, All Rights Reserved">
<title>BVS New Vehicle.</title>
<link rel="stylesheet" type="text/css" href="/extjs4/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="/vvresources/valence.css" />
<link rel="stylesheet" type="text/css" href="/html/AA/assets/style.css" />
<script type="text/javascript" src="/extjs4/ext-all.js"></script>
<script type="text/javascript" src="/vvresources/valence-extjs4.js"></script>
<script type="text/javascript">
    
// Ext.onReady delays execution until page is fully loaded into memory
//
Ext.onReady(function() {  
 // Define the models for our stores
    globalVarCustomer = '0777269';
 // Define the models for our stores
    // 
    Ext.define('cuspackage',{
        extend: 'Ext.data.Model',
    	fields: [{
			name: 'VVREC',
			type: 'string'
		},{
    		name: 'VVVALUE',
			type: 'string'
		},{
        	name: 'VVCYCLE',
			type: 'string'
		}]
	});
	
	var cuspackageStore = Ext.create('Ext.data.Store',{
    	model : 'cuspackage',
		proxy : {
			type : 'ajax',
			url  : 'vvcall.pgm',
			extraParams : {
				pgm: 'BVSNEWVH',
				action: 'getCusPackagesList',
                cusno: globalVarCustomer
			},
			reader : {
				type : 'json',
				root : 'COMBODS'
			}
		}
	});
    var formMain = Ext.create('Ext.form.FormPanel', {
    	renderTo: 'formMain',
		width: 550,
		frame: true,
		bodyPadding: 10,
		iconCls: 'application_view_detail',
		title: 'TEST Form',
		defaults: {
			xtype: 'textfield',
            enforceMaxLength: true,
			labelAlign: 'right',
			labelWidth: 110,
			width: 500
			
		},
		items: [{
			xtype: 'displayfield',
			itemId: 'MSG',
            fieldLabel: ':',
			msgTarget: 'under'
		},{
        	xtype: 'textfield',
			id: 'REGO',
			fieldLabel: 'Registration',
			maxLength: 6,
            fieldStyle: 'text-transform:uppercase'
            
		},{
    		xtype: 'textfield',
			id: 'MAKE',
			fieldLabel: 'Make',
			maxLength: 10
		},{
    		xtype: 'textfield',
			id: 'MODEL',
			fieldLabel: 'Model',
			maxLength: 10
		},{
        	xtype: 'textfield',
			id: 'DRIVER',
			fieldLabel: 'Drivers name',
			maxLength: 30
		}, {
            xtype: 'combo',
			id: 'CUSPACKAGE',
			fieldLabel: 'Coverage Type',
            emptyText:'Select coverage type',
			forceSelection:true,
			displayField:'VVREC',
            valueField: 'VVVALUE',
            editable: false,
			store:cuspackageStore
		}, {
         xtype: 'datefield',
        anchor: '75%',
        fieldLabel: 'Start Date',
        id: 'STARTDATE',
        format: 'd/m/Y',
        value: new Date()   // defaults to today
    }, {
        xtype: 'datefield',
        anchor: '75%',
        fieldLabel: 'End Date',
        id: 'ENDDATE',
        format: 'd/m/Y',
        minValue: new Date(),
        value: Ext.Date.add (new Date(),Ext.Date.MONTH,12)
    },{
            xtype: 'textfield',
			id: 'VIN',
			fieldLabel: 'VIN #',
			maxLength: 20
		} ],
		buttons: [{
			text: 'Load',
			iconCls: 'accept',
			handler: function() {
				getCustomerRecord();
			}
		}]
	});

	// the following function will call an RPG program when user clicks "Go" or presses the ENTER key
	//
	var getCustomerRecord = function() {
		Ext.Ajax.request({
			url: 'vvcall.pgm',
			params: {
				pgm: 'bvsnewvh',
				action: 'crtBVSNewVehicle',
				cusno: globalVarCustomer,
                cuspackage: formMain.getComponent('CUSPACKAGE').getValue(),
                rego: formMain.getComponent('REGO').getValue(),
                vin: formMain.getComponent('VIN').getValue(),
                make: formMain.getComponent('MAKE').getValue(),
                model: formMain.getComponent('MODEL').getValue(),
                driver: formMain.getComponent('DRIVER').getValue(),
                branch: '001',
                user: Valence.util.getUserName(),
                startdate: formMain.getComponent('STARTDATE').getValue(),
                enddate: formMain.getComponent('ENDDATE').getValue()
                
			},
			success: function(response) {
				var data = Ext.decode(response.responseText);
				if (data.SUCCESS == '1') {
					formMain.getForm().reset();
                    Ext.Msg.alert(' added successfully...');
				} else {
					
						formMain.getComponent('MSG').markInvalid(data.MSGTEXT);
				}
			}
		});
	};

});
</script>
</head>
<body>
<div style="margin-left: auto ; margin-right: auto ; width:550px">
<table>
  <tr>
       <img id="logo"  alt="" src="/html/AA/assets/NewVehicleBanner.jpg"></img>
  <hr width="100%"> 
  </tr>
  <tr>
  <td><p>TEST FORM</p></td>
  </tr>
  <tr>
  	<td><br><div id="formMain"></div></td>
  </tr>
  
</table>
<table >
    <tr>
    <br/>
    <hr width="100%"> 
  <td colspan="3"></td>
   </tr>
   <tr>
   <td><br/></td>
   </tr>
  <tr>
  <td colspan="2"></td>
  <br/>
  </tr>
  <tr>
  <td></td>	
  </tr>
  <tr>
  <td></td>
  </tr>
</table> 
</div>
</body>
</html>
                          Last edited by robert.swanson; 11-19-2013, 05:45 PM. Reason: add #CODE tags

                          Comment

                          • #14
                            Here is an example of what I think your asking for.

                            Code:
                            Ext.onReady(function(){
    var cuspackageStore = Ext.create('Ext.data.Store', {
        fields: ['VVVALUE', 'VVREC', 'VVCYCLE'],
        data : [
            {"VVVALUE":"1", "VVREC":"Type 1", "VVCYCLE":8},
            {"VVVALUE":"2", "VVREC":"Type 2", "VVCYCLE":10},
            {"VVVALUE":"3", "VVREC":"Type 3", "VVCYCLE":5}
        ]
    });
    
    Ext.create('Ext.form.Panel', {
        title       : 'Simple Form',
        itemId      : 'simpleform',
        bodyPadding : 5,
        width       : 350,
        layout      : 'anchor',
        defaults    : {
            anchor: '100%'
        },
        defaultType : 'datefield',
        items       : [{
            fieldLabel : 'Start Date',
            itemId     : 'startdate',
            allowBlank : false,
            format     : 'd/m/Y',
            value      : new Date(),
            listeners  : {
                scope  : this,
                change : function(cmp, newValue){
                    if (!Ext.isEmpty(newValue)){
                        var coverageType = Ext.ComponentQuery.query('#coveragetype')[0],
                            startDate    = Ext.ComponentQuery.query('#startdate')[0],
                            endDate      = Ext.ComponentQuery.query('#enddate')[0],
                            vvCycle,
                            rec;
                        
                        rec = coverageType.findRecord('VVVALUE', coverageType.getValue());
                        
                        if (rec){
                            vvCycle = rec.get('VVCYCLE');
                            endDate.setValue(Ext.Date.add(newValue, Ext.Date.MONTH, vvCycle));
                        }
                    }
                }
            }
        },{
            fieldLabel : 'End Date',
            itemId     : 'enddate',
            format     : 'd/m/Y',
            minValue   : new Date(),
            value      : Ext.Date.add(new Date(), Ext.Date.MONTH, 12)
        },{
            xtype          : 'combo',
            itemId         : 'coveragetype',
            fieldLabel     : 'Coverage Type',
            emptyText      : 'Select coverage type',
            forceSelection : true,
            displayField   : 'VVREC',
            valueField     : 'VVVALUE',
            editable       : false,
            store          : cuspackageStore,
            listeners      : {
                scope  : this,
                select : function(cmp, recs){
                    var vvCycle   = recs[0].get('VVCYCLE'),
                        startDate = Ext.ComponentQuery.query('#startdate')[0],
                        endDate   = Ext.ComponentQuery.query('#enddate')[0];
                    //after user selects a record on the combo pull the 
                    // VVCYCLE value update the end date
                    //
                    if (!Ext.isEmpty(vvCycle)){
                        endDate.setValue(Ext.Date.add(startDate.getValue(), Ext.Date.MONTH, vvCycle));
                        console.log('vvCycle amout : ', vvCycle);
                    }
                }
            }
        }],
        renderTo           : Ext.getBody()
    });
});
                            Example via jsfiddle
                            http://jsfiddle.net/johnnymajor/g4v5A/

                            Thanks

                            PS - When posting code if you could wrap it with the [CODE] tags that would help with the formatting and make it easier for others to read.
                            Last edited by Johnny Major; 11-19-2013, 06:32 PM. Reason: Forgot the change of start date updating end date;

                            Comment

                            • #15
                              That's exactly what I need Johnny, perfect!!! Thanks for all your help.

                              p.s. Cheers for the tip of the [code] tag too

                              Comment

                              Previous 1 2 template Next
                              Working...
                              X