6 Replies Latest reply on Feb 12, 2019 3:43 PM by Hoek

    Apex 18 - How to create a custom SSI button

    Hoek

      OK,

       

      First of all: I'm not familiar (yet) with layout/CSS stuff in APEX, I've always been working on the database and mostly managed requirements using Universal Theme.

      But one cannot and should not be a dinosaur until the end.

       

      It seemed like a simple requirement, but I'm still struggling with the following:

       

      How do I create a button in an APEX18 login page that just looks like the 'official google sign-in button', with this input:

       

      https://developers.google.com/identity/sign-in/web/sign-in#add_a_google_sign-in_button

       

      In short: can I put this:

       

      <div class="g-signin2" data-onsuccess="onSignIn"></div>


      somewhere in APEX?

      Or provide the code needed so it is inhereted/recognized?

       

      Do I need to load the Google Platform Library, before I can even reference g-signin2 ?

      Should I add something to the 42 template?

       

      I know that setting icon => fa-google would do it, more or less, but it is not the same.

      I want to know if it can be done.

      It seemed  a very simple requirement, but for now I'm stuck.

       

      Any inputs are much appreciated.

        • 1. Re: Apex 18 - How to create a custom SSI button
          fac586

          Hoek wrote:

           

          OK,

           

          First of all: I'm not familiar (yet) with layout/CSS stuff in APEX, I've always been working on the database and mostly managed requirements using Universal Theme.

          But one cannot and should not be a dinosaur until the end.

           

          It seemed like a simple requirement, but I'm still struggling with the following:

           

          How do I create a button in an APEX18 login page that just looks like the 'official google sign-in button', with this input:

           

          https://developers.google.com/identity/sign-in/web/sign-in#add_a_google_sign-in_button

           

          In short: can I put this:

           

          <div class="g-signin2" data-onsuccess="onSignIn"></div>


          somewhere in APEX?

          Or provide the code needed so it is inhereted/recognized?

           

          Do I need to load the Google Platform Library, before I can even reference g-signin2 ?

          Yes.

          Should I add something to the 42 template?

          Preferably not. Stick the Google Platform Library script URL in the user interface JavaScript File URLs property (Shared Components > User Interface Attributes > Desktop). Hopefully the omission of the async and defer attributes will not prove to be a problem...

          1 person found this helpful
          • 2. Re: Apex 18 - How to create a custom SSI button
            Hoek

            Thanks, fac586,

             

            I've added the URL to  'User Interface Detection' => 'CSS File URLs' as you pointed out.

            For the login button I set the Appearance property 'CSS Classes' to 'g-signin2'.

             

            When running the application I get the following error in the console:

             

            uncaught exception: gapi.auth2.ExternallyVisibleError: Missing required parameter 'client_id'

             

            Any ideas/inputs?

            Sofar googling the error hasn't given me much of a clue, but I'm still on it.

             

            • 3. Re: Apex 18 - How to create a custom SSI button
              fac586

              Hoek wrote:

               

              I've added the URL to 'User Interface Detection' => 'CSS File URLs' as you pointed out.

              My reading of the Google instructions is that the mix-in is JavaScript rather than CSS. I have put https://apis.google.com/js/platform.js in the user interface JavaScript File URLs property, not the equivalent CSS attribute. (I suspect that you have as well since I don't see any effect when the CSS setting is used).

              For the login button I set the Appearance property 'CSS Classes' to 'g-signin2'.

              You'll also need the data-onsuccess="onSignIn" attribute in the button's Custom Attributes property.

              uncaught exception: gapi.auth2.ExternallyVisibleError: Missing required parameter 'client_id'

               

              Any ideas/inputs?

              According to the instructions you need to specify your client ID using a meta element in the page headers:

               

              <meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">

               

              This is where things might get tricky, as APEX has never had a good way to globally incorporate custom document header content without modifying page templates.

               

              Do you need to include this button on all pages, or will it only appear on a subset?

              1 person found this helpful
              • 4. Re: Apex 18 - How to create a custom SSI button
                Hoek

                Thanks again, fac586!

                Learned something new again.

                I'll get back on this later today, I'm on location currently.

                 

                The button is only used on one page, the login page.

                • 5. Re: Apex 18 - How to create a custom SSI button
                  fac586

                  Hoek wrote:

                   

                  The button is only used on one page, the login page.

                  That simplifies things considerably. In that case you only need to use page attributes. Put the API URL and meta tag in the JavaScript File URLs and HTML Header page properties respectively.

                   

                  The JS URL reference can be removed from the User Interface properties to avoid unnecessary overhead on other pages.

                  • 6. Re: Apex 18 - How to create a custom SSI button
                    Hoek

                    Awesome, fac586!

                    A new world has opened up!

                    Soon (I hope) my days as an APEX layout stuff 'n00b' will be over...

                    Now that I get the picture, I'll have enough ideas and stuff to play with.

                    Thanks a lot!