4 Replies Latest reply on May 13, 2014 4:17 AM by mcollinge

    How to make a new Dialog Box

    Novice

      Does anyone know how to create a new dialog box such as the Create User dialog that gets popped when "Register" is clicked?

       

      Any help would be great, I seem to be mired in FormFileds and soy, and trying to figure out where the actual trigger is.

       

      Thanks!

        • Re: How to make a new Dialog Box
          Novice

          The register button has URL as

           

               create-account.jspa

           

          That should direct to the Strut action named create-user. But if you look in the browser logs it does not, it goes instead to

           

               __services/v2/rest/userregistration

           

          And that is a Spring rest service

           

               UserRegistrationServiceImpl -> UserRegistrationService

           

          and it calls the get() method.

           

              @GET

              @Path("/")

              public UserRegistration get(@QueryParam("requiredOnly") boolean requiredOnly);

           

          In turn this returns a

           

               UserRegistration -> MappedFieldForm

           

          If you fill out the form it calls the post in UserRegistrationServiceImpl:

           

               @POST

              @Path("/")

              public Response register(UserRegistration validationForm);

           

          Clearly there is some JavaScript magic happening here somewhere and the likely suspect is:

           

               resources/scripts/apps/userregistration/main.js

           

          but that file is not loaded to the browser... a lot of generated files are, presumably generated from SOY.

           

          searching for UserReg in those files results in this line:

           

               jive.shared.soy.resourceInlineJs({code: '$j(function() {var userRegApp = new jive.UserRegistration.Main({forceSecure: ' + soy.$$escapeHtml(opt_data.forceSecure) + ', form:' + soy.$$filterNoAutoescape(JSON.stringify(opt_data.form).replace(/</g, '\\u003C').replace(/>/g, '\\u003E').replace(/\u2028/g, '\\u2028').replace(/\u2029/g, '\\u2029')) + ', page:true, successURL: \'' + soy.$$escapeJsString(opt_data.successURL) + '\'});});'}, param6);

           

          That doesn't look like much. I but it references:

           

                jive.UserRegistration.Main

           

          that is not the namespace in the strut file, or in

           

               userregistrationform.soy

           

          It is however in the JavaScript file mentioned above.

           

               "jive.UserRegistration.Main = jive.oo.Class.extend(function(protect)"

           

          presumably the

           

               function(protect)

           

          is what lets the call through to the spring service. If you call it from the browser it responds with:

           

               throw 'allowIllegalResourceCall is false.';

               {

                 "code" : 4026,

                 "message" : "The request could not be validated as originating from within the SBS application"

               }

           

          There is a Strut Action:

           

              <action name="create-account" class="com.jivesoftware.community.action.CreateNewUserAccountAction">

                      <interceptor-ref name="defaultStack"/>

                      <result name="unauthorized" type="redirect">login.jspa</result>

                      <result name="unavailable" type="soy-page">jive.user.registration.unavailablePage</result>

                      <result name="success" type="soy-page">jive.user.registration.page</result>

                  </action>

           

          The class

           

               com.jivesoftware.community.action.CreateNewUserAccountAction

           

          Does appear to be soy aware

           

               "implements com.jivesoftware.community.web.soy.SoyModelDriven"

           

          But breakpoints in this action never seem to result in the code being called.

           

          This calls appears to create a lot of FormFileds and hands them off through the call to getModel() but that is also done in the UserRegistrationServiceImpl.get()

           

          Questions:

           

          How does create-account.jspa somehow become __services/v2/rest/userregistration?

               I am unfamiliar with this. Does it have something to do with SOY?

           

          What happened to the Strut Action? I

               It doesn't ever appear to be called. Was this deprecated or used elsewhere in the code?

           

          In the Jive system, do I need to recreate the JavaScript , Spring service, and Soy template to create a dialog box?

          If so, how are they all wired together? How do I get my JavaScript to be loaded in with the rest of the generated ".js" files?

           

          Please tell me there is an easier way to pop a simple dialog box in this system...

            • Re: How to make a new Dialog Box
              Novice

              The JavaScript that is called looks like this:

               

              jive.user.registration.modal = function(opt_data, opt_sb) {

                var output = opt_sb || new soy.StringBuilder();

                output.append('<div id="jive-user-registration-form-modal" class="jive-modal j-modal j-modal-register jive-modal-medium">');

                jive.user.registration.generalErrors(null, output);

                output.append('<header class="j-modal-header"><h2>', soy.$$escapeHtml(jive.i18n.i18nText(jive.i18n.getMsg('account.createNewAccount.header'),[])), '</h2></header><label class="j-508-label" id="close-modal-508">', soy.$$escapeHtml(jive.i18n.i18nText(jive.i18n.getMsg('global.close.modal'),[])), '</label><a href="#" class="j-modal-close-top close" aria-labelledby="close-modal-508" title="', soy.$$escapeHtml(jive.i18n.i18nText(jive.i18n.getMsg('global.close.modal'),[])), '">', soy.$$escapeHtml(jive.i18n.i18nText(jive.i18n.getMsg('global.close'),[])), '  <span class="j-close-icon j-ui-elem" role="img"></span></a><section class="jive-modal-content clearfix">');

                jive.user.registration.formFields(opt_data, output);

                output.append('</section></div>');

                return opt_sb ? '' : output.toString();

              };

               

              This is clearly generated by the Soy.

            • Re: How to make a new Dialog Box
              mcollinge Expert

              Depends what you're trying to do. If you simply want to pop up a dialog in a lightbox, then this snippet will do the job (you can run it from the JS console);

               

              if ($j('#my_lightbox_container').length==0) {
                  $j('.j-alert-container').before('<div id="my_lightbox_container"></div>');
              }
              
              var htmlClose = '<div style="top:4px;right:3px;position:absolute;height:30px;display:block;"><a href="javascript:void(0)" class="cancel-login" id="close-360-dialog" style="float:right"><img src="'+_jive_base_url+'/resources/scripts/fancyzoom/images/closebox.png"></a></div>';
              
              var popup = htmlClose + '<div class="my-container" style="background:white;border:3px solid #848589;padding-top:30px;border-radius:3px;">Hello World</span>';
              
              $j('#my_lightbox_container').html(popup).lightbox_me({
                  closeSelector:'#close-360-dialog',
                  centered:true
              });
              

               

              Your posts contain a lot of questions.. you might be best breaking them down a bit so that it's easier for people jump in and answer pieces of it.

               

              We have sometimes used the method above to put an iframe in the lightbox.. the iframe loads an undecorated page from the site which has the form in it (you could also do it against another server.. like an external survey provider). Wiring up forms + fields + struts + DAO is covered in the Jive documentation.

              1 person found this helpful