7 Replies Latest reply on Aug 26, 2013 9:52 AM by Mike_Mitchell

    Icons that align left

    duncanbaker

      Hey folks

       

      I have an idea I'd like to implement and wondering what the best approach would be. I have a Contacts layout, and I'd like to show social media icons in a row on this layout. The actual address of the social pages (say Twitter, LinkedIn and Facebook) would be input on a popup edit layout and just the icons would show on the main Contact layout. I can already make the icon not show up if there is no address input (simple calculation field).

       

      However, I'd like to get fancy and have the active icons align to the left. So, if a contact had all three it would display as:

      FB icon | TW icon | IN icon

       

      But if someone didn't have a Twitter account it would display as:

      FB icon | IN icon

      The IN icon shifts left and fills the spot that TW occupied in the previous example.

       

      I'm thinking maybe three (or more) calculated container fields all with a complex Case statement that tests if the address exists and if it does that one of the previous container fields in the row doesn't already have that icon showing, but I've not got anywhere near testing to see what issues might be encountered.

       

      Anyone done this before or got any ideas on best practice for implementing? Of course I could just make things easy by having icons static in position, but where's the fun in that?

       

      Thanks all.

        • 1. Re: Icons that align left
          Mike_Mitchell

          At least a few different ways to accomplish this sort of thing:

           

          1) Write HTML code to echo the icons (graphics) out in a web viewer.

          2) Use a repeating field with a horizontal orientation.

          3) Use a series of portals to a related table, each portal starting with a different row, in sequence (first = row 1, second = row 2, and so forth).

           

          All depends on exactly what you're trying to accomplish. My tendency would be to go for #1 or #3 depending on exactly what you wanted them to do (and how much interaction you needed them to have with the user).

           

          HTH

           

          Mike

          • 2. Re: Icons that align left
            duncanbaker

            Thanks Mike. I would want the icons to be buttons that would launch the URL to the social media page in the default browser. Based on that, does it narrow down the options?

            • 3. Re: Icons that align left
              Mike_Mitchell

              Not a lot. Since you're doing something web-based, it's easy enough to make an image a link in HTML code, so it's not really an issue. I would still tend to go with #1 or #3, primarily because managing the calculation for the repeating field is going to be a little annoying (personal preference). Depends, I guess, on how comfortable you are with HTML coding. The related record option is actually a good one because everything will line up automatically for you based on the number of related records (i.e., if the person doesn't have a related "Facebook" link, then it just doesn't show up). Another benefit: You can tell the relationship to sort on your Relationships graph based on a sort field you define, so your icons appear in the order you want them to automatically.

               

              So if you're not proficient with HTML code and comfortable working with the Web Viewer, my suggestion would be a related table that holds the necessary containers and related information (sort field, URL) and just use a series of portals.

               

              Mike

              • 4. Re: Icons that align left
                duncanbaker

                Thanks for the speedy reply. I am familiar with HTML but have no clue where to start with option 1. And to figure out option 3 of the portals will take me a little time to think through and set up some tests - not sure I'm fully grasping that solution yet either.

                 

                If you're able to post any code or sample files over the next few days (honestly, no rush) then I'd be grateful, but I know that's asking a lot. If not I'll give it thought in the coming week or so and see if I can figure it out. I'll come back to this post with progress.

                 

                Thanks again.

                • 5. Re: Icons that align left
                  Mike_Mitchell

                  Sure. Give the attached a whirl.

                   

                  Mike

                  • 6. Re: Icons that align left
                    duncanbaker

                    Awesome. Makes perfect sense once you see it. I ended up putting my icons in a table and then used a join table to relate the contact to multiple icons. I based my multiple mini portals on the join table, which also has the URL of the social media page in, and the field in each portal is a button that launches the URL in the default browser. I also sorted the portals by icon name, so the icons end up in alphabetical order on the layout. A little bit of formatting of the portal to remove borders and backgrounds and I ended up with exactly what I was looking for - icons that only show when there is an associated social media web address, and those that show align to the left on the layout. Although I've not done it yet, I expect I'll be scripting the creation/deletion of the join table record at the time that the social media field is modified.

                     

                    Thanks Mike for the guidance and especially the sample file. I'm very grateful.

                    • 7. Re: Icons that align left
                      Mike_Mitchell

                      Glad you got it working.

                       

                      Mike