How cool does it look to have a custom “Social media icons” in customers or leads records! Doesn’t it help the form looks like a custom app totally? Here comes another custom control, “Social media icons”. It has around 18 social Media Icons and 6 types of designs that are totally configurable.

Solution – https://github.com/vigneshr1236/PCF-365spartan-Custom-SocialMediaIconsControl/tree/master/solution

Source Code – https://github.com/vigneshr1236/PCF-365spartan-Custom-SocialMediaIconsControl

Icons available for: facebook, twitter, google, LinkedIn, youtube, pinterest, skype, android, dribbble, vimeo, tumblr, vine, foursquare, StumbleUpon, flickr, yahoo, reddit, rss.

Types of designs available

Specify any one of the below keywords to SocialMediaType property.

Note – Use lowercase letters.

  • default-social-bar
  • circular-social-bar
  • button-social-bar
  • glow-social-bar
  • animatedbutton-social-bar
  • hower-social-bar

1. animatedbutton-social-bar

Youtube video

2. button-social-bar

3. default-social-bar

4. glow-social-bar

5. hower-social-bar

6. circular-social-bar

How to configure:

  1. Import the solution “SocialMediaIconsControl_managed.zip” to D365. You can find it from Git hub –  https://github.com/vigneshr1236/PCF-365spartan-Custom-SocialMediaIconsControl/tree/master/solution
  2. Let’s say I wanted to add “365Spartan_SocialMediaIconsControl” to Contacts, open the Contact entity’s, Main form in edit mode.
  3. Create a new field or choose any field which is of type SingleLine.Text, I have created a new field called SocialMedia for this demo.

4. Open the field and click on the “Controls” link.

5. Click on “Add Control”, select “ 365Spartan_SocialMediaIconsControl ”.

6. Click the Edit Icon to set SocialMediaType which is a mandatory property that needs to be configured as shown in the figure.

It is used to configure the type of social media Icon bar. To see the full list of Icon Bars available refer to the top of the page.

7. For this Demo, I have added “animatedbutton-social-bar” type icons you could enter a value or configure a field and click “Ok“.

8. For now, each field you configure is displayed as an icon. To display a twitter icon configure the twitter property to a field.

9. Select Web, Phone and Tablet radio buttons to get it loaded in all the 3 devices and click “Ok“.

Tada, there you go, amazing, isn’t it?

References

You can refer below links for source code and solution file

Solution –  https://github.com/vigneshr1236/PCF-365spartan-Custom-SocialMediaIconsControl/tree/master/solution

Source Code – https://github.com/vigneshr1236/PCF-365spartan-Custom-SocialMediaIconsControl

You can also take a look at the PCF – Audio Attachment Control with Live Preview custom control.

To get started with setting up your environment and creating your first powerApps component framework project refer.

PCF – Where do I start with?

For a detailed explanation on the control manifest file refer.

PCF – Exploring ControlManifest File In Detail

Hope It helped you. Add your comments if you have any challenges in adding “365Spartan_SocialMediaIconsControl” to PowerApps feel free to reach me out. I’ll respond as soon as possible.

Let me know your feedback in the comments section. Also, kindly don’t forget to like and share.

Happy Learning!!!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s