Forum Discussion

CarolineS's avatar
CarolineS
Boss
7 years ago

Hints for adding a new form field to the SSO-registration page?

Hi team!

I'm looking to add a "how did you hear about the community" form field to our registration process. We use SSO, so the page we'd do this on is the select-display-name / accept Terms & Conditions page (UserSsoRegistrationPage in Studio), which is the only community-hosted registration step.

Support has kindly created this custom field on the backend for us, and now we need to add it to the frontend. I'm trying to just get it done rather than enlist professional services or a 3rd party (we don't have internal dev resources right now). But - my dev skills are super rusty so I could use some help! 

Here's basically what we want to do (screenshot):

I've figured out how to add the field to the page by creating a custom component that @overrides user-sso-registration-form (and then @delegates to print out the rest of the form). But I can't figure out how to actually inject the field within the form rather than just printing it out at the beginning. Probably one needs some Javascript chops to do this, of which I have none.

Any hints would be most appreciated! Or you can just tell me to pay someone :-)

Cheers!
- Caroline

  • luk's avatar
    luk
    Boss
    7 years ago

    CarolineS This is not trivial, but your intuition was actually the right one! What you can do is to find the "spot" in the HTML markup of the original form where you want to inject the custom field with a Regular Expression, add the custom HTML markup (your custom field) to the match and replace the original match...

    What you need to do first is to assign the original components markup to a variable, so we can "RegEx" it and then use ?replace("<your RegEx", "<Regex Match + new markup>", "rmis"), something like this:

    <#-- create a variable that holds the original component's markup -->
<#assing markup>
    <@delegate />
</#assign>

<#-- figure out a "hook" for your RegEx and replace+inject custom field -->
<#assign markup = markup?replace("<RegEx>", "<RegExMatch+CustomMarkup>", "rmis") />

<#-- and finally output what we just did -->
${markup}

     

    you could probably also go the jQuery-route and inject the field client side, that might be easier than RegEx but might come with other issues (likely the user would see a field is "added" after page-load etc.). Would be interesting to see if both works though =).

    untested exemplary code for the JavaScript/jQuery approach:

    <@liaAddScript> 
;(function($) {
    // define your custom field markup
    var $markup = $('<your custom field HTML>');

    // inject the markup where you need it
    $markup.insertAfter('<selector where you want to inject the custom field after>');
})(LITHIUM.jQuery);
</@liaAddScript>

    hope it helps!

     

    PS: if you really like to pay someone, Glowing Blue is available =)

    • CarolineS's avatar
      CarolineS
      Boss
      7 years ago

      Thanks so much, luk! Your explanation makes me feel less silly that I wasn't able to figure it out myself. We're going to be working with Lithium PS on this one (though I may try my hand at it momentarily just to see if I can do it now, with your excellent hints).

      Cheers!