Customer Portal

Get Involved. Join the Conversation.

Topic

    Kev
    Widget to display custom contact fields based on the event...
    Topic posted December 15, 2008 by Kev Red Ribbon: 250+ Points, last edited October 29, 2011 
    1481 Views, 2 Comments
    Title:
    Widget to display custom contact fields based on the event of another customer contact field being updated
    Content:

    Hi,

     

    Thanks for the examples, they have been useful getting started for this type of customisation.

     

    I am wondering if someone can help me work out how to adapt and apply the examples so that I can create a widget to display a group of custom contact fields based on the event of another custom contact field being updated.

     

    I have tried to adapt the example code but am not getting the dynamic areas to display based on the event action so I am not sure if I have adapted the code incorrectly or if I am applying it in the wrong places within the portal framework.

     

    At this stage I am exposing a custom contact opt-in field (cf_id="25") on the account profile page and want a group of custom contact fields to appear below it if the "yes" option is selected.

     

    The code I have applied to various pages are -

     

    rn_widgets.css

    div.DynamicForm        
    {
    margin: 0px 0px 0px 0px;
    display:none;
    }

     

    profile.php

     <fieldset>

         <legend>Subscription</legend>
               <table width="90%" style="table-layout:fixed">                             

                        <rn:widget path="standard/field/Input" table="contacts" cf_id="25" required="false" label="Newletter" />
               </table>
      </fieldset>
      <div class="DynamicForm" > 
           <rn:widget path="custom/DynamicForm" />
               <fieldset>
                    <legend>Mailing Address</legend>
                          <table width="90%" style="table-layout:fixed">
                                 <rn:widget path="standard/field/Input" table="contacts" cf_id="17" required="false" label="Street Address" />
                                 <rn:widget path="standard/field/Input" table="contacts" cf_id="18" required="false" label="Building" />
                          </table>
                    </fieldset>
       </div> 

     

     

    The custom widget code I have used is as follows -

     

    view.php

    <rn:meta controller_path="custom/DynamicForm" js_path="custom/DynamicForm"/>

     

    controller.php

    <?php  if (!defined('BASEPATH')) exit('No direct script access allowed');

    class DynamicForm extends Widget
    {
        function DynamicForm()
        {
            parent::Widget();
           
            //Create attributes here
            $this->attrs['attribute'] = new Attribute(msg_get_rnw(ATTRIBUTE_NAME_LBL), 'String', msg_get_rnw(ATTRIBUTE_DESCRIPTION_LBL), msg_get_rnw(ATTRIBUTE_DEFAULT_VALUE_LBL));
        }
       
        function generateWidgetInformation()
        {
            //Create information to display in the tag gallery here
         $this->info['notes'] =  msg_get_rnw(WIDGET_SERVES_TEMPL_MODEL_OWN_CUST_MSG);
            $this->parms['url_parameter'] = new UrlParam(msg_get_rnw(URL_PARAMETER_LBL), 'parm', true, msg_get_rnw(DEF_URL_PARAMETERS_AFFECT_WIDGET_LBL), 'parm/3');
        }
     
         function getData($data)
        {
            //Perform php logic here  
            return $data;
        }   
    }

     

    logic.js

    // JavaScript Document

    function DynamicForm(data)
    {
        //Data object contains all widget attributes, values, etc.

        this.init = function()
        {
            //Perform any initial javascript logic here
      evt_menu_filter_get_update.subscribe(oncf_id="25"Update);
      
        }

    }


    function oncf_id="25"Update(type, args)
     {
      var evtObj = args[0];
      
            if(evtObj.data.value == "Yes")
                document.getElementById("DynamicForm").style.display = "block";
            else
                document.getElementById("DynamicForm").style.display = "none";   
     }

     

     

    If you can provide some direction where I am going wrong it would be appriecated.

     

    Regards

    Kevin

    Comment

     

    • Ernie Turner

      There are a number of problems with your JavaScript code syntax. First off, JavaScript function names cannot contain the equal or quote characters. Second, you also have your brackets mismatched as the event handler function needs to be defined within the DynamicForm() function. This is probably closer to what you want. I would recommend using a JavaScript code editor since it will tell you that the syntax is incorrect.

       

       

      function DynamicForm(data) { this.init = function() {

      evt_menu_filter_get_update.subscribe(onCustomFieldUpdate); } function onCustomFieldUpdate(type, args) { var evtObj = args[0]; if(evtObj.data.value == "Yes") document.getElementById("DynamicForm").style.display = 'block'; else document.getElementById("DynamicForm").style.display = 'none'; } }

       

      Based on what I think you're trying to do, even after the code syntax is correct, I'm pretty sure this isn't going to do what you want. I'm not exactly sure why you are subscribing to the "evt_menu_filter_get_update" event, but that gets fired when you select a product or category from the dropdown which I don't think is what you want.

       

      Currently there isn't an event that is fired when the value on a custom field changes. This means that there isn't going to be an event thats fired when a user modifies custom field 25. In order to do that you're going to have to create a custom widget and have it fire the event yourself.

       

    • david fulton

      Just echoing Ernie's response here - the Dynamic Forms tutorial (I assume that some of the examples that you have built out were the starting point for some of your work) states that the event bus as it stands can be used for our of the box fields - and although November '08 allows you to build event bus entries for custom fields - you are going to have to build them out yourself. That in itself is probably the largest amount of effort you'll encounter. Once you have that built out, the rest of your work should be as easy as the event bus example I used in the tutorial.

       

      Keep us in the loop as far as your progress.