Iced blue neumorphic UI kit for your Power Apps!

Welcome to the new world of design in Power Apps! This toolkit has been curated using a fusion of out-of-the-box controls and code to extend the existing control set and take your Power Apps UI to the next level!

The toolkit has a number of components which have various properties that you can customise without going into the code itself. If you do however wish to make any adjustments etc., you have the ability to edit the code directly within the application from the Components pane. Please note that this kit is packaged as a canvas app in a .zip file, so you'll need to import it as a Canvas App. Follow these steps to install:

From the menu on the left, navigate to Apps

Then click on 'Import Canvas App'

Then click on Upload

Give it a minute or two to process

And then click Import

The toolkit comprises of two screens each – these screens allow you to pick the themes of all your controls without having to change them individually. The first screen has lineal gradients, and the second screen allows you to pick and mix. The values of those are kept in the AppOnStart collections including the Default theme which is stored in a variable.

Please see below a breakdown of the toolkit - I hope you enjoy it and I'd love to hear your feedback! 😊

Lineal gradient colour picker

Pick’n’mix

Button

This control is fully scalable so you can extend them both ways. It has the following properties:

• IconName – to make life easier and save you from having to find SVG code online, I have embedded 24most common icons into the button. So all you need to do in this property is type one of the following names of supported icons: calendar, bag,
  basket, clipboard, upload, download, email, home, user, print, phone, trash, cancel, edit, new, back, next, refresh, filter, settings, chart, notification, bookmark, alarm,

• IconColorActive – this is the colour of the icon if you turn off the lineal gradient property,

• IconColour – this is the colour of the icon when you haven’t pressed it,

• LinealGradient – this is a Boolean property. If you toggle this to true, your icons will have lineal gradient applied to them. If you toggle it to false, they will only have a single tone.

• LinealGradientColor1 – this is the first lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc).

• LinealGradientColor2 – this is the second lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc).

• BorderRadius – allows you to specify the border radius of your button

• OnSelect – this is where you will put the OnSelect code

Star Rating

This control has 5 input properties:

• Rating – the number of selected stars,
• MaxRating – this is a static number and at present this control only supports 5 stars.
• BoxShadow – choose between inset and convex box shadow,
• LinealGradient1 – this is the first lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc).
• LinealGradient2 – this is the second lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc)

This control has an output value just like the usual star rating. If you’d like to reference it or patch it to a data source, you do it the usual way – StarRating.Value.

Date Picker

This control has 2 input properties:

• LinealGradient1 – this is the first lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc).
• LinealGradient2 – this is the second lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc) It also has an output property called DateSelected. If you’d like to patch the selected date to a data source, you’ll do it the usual way – DatePicker.DateSelected.

Toggle

The toggle has 7 properties:

• LinealGradientColour1 – this is the first lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc).
• LinealGradientColour2 – this is the second lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc)
• Label – Boolean value defining whether you want the on/off label to be visible,
• LabelTrueText – just like the usual toggle, this is the true text,
• LabelFalseText – same as above, this is the false text,
• FontSize – define the size of the text in your label,
• IconVisible – define whether you want the ‘power’ icon to be visible on the toggle

The toggle has an output property called Value. If you’d like to patch the value of the toggle to a data source, you will use Toggle.Value.

Checkbox

Checkbox has the following 6 properties:

• IconColorActive – this is the colour of the icon if you turn off the lineal gradient property,
• IconColour – this is the colour of the icon when you haven’t pressed it,
• LinealGradient – this is a Boolean property. If you toggle this to true, your icons will have lineal gradient applied to them. If you toggle it to false, they will only have a single tone.
• LinealGradientColor1 – this is the first lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc).
• LinealGradientColor2 – this is the second lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc).
• OnSelect – this is where you will put the OnSelect code It also has an output property called Checked. If you’d like to patch the value of the checkbox to a data source, you will use Checkbox.Value.

Pill progress bar – animated

This progress bar has the following 5 properties:

• Value – define the progress that you want to show. This should be an integer without % - the control will automatically calculate the %.
• MaxValue – this is the total value that you want to calculate the percentage against,
• LinealGradientColor1 – this is the first lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc).
• LinealGradientColor2 – this is the second lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc).
• LabelSize – text size of the percentage label

Slider

This control has 4 properties:

• Min – minimum value on the slider,
• Max – max value on the slider,
• LinealGradientColor1 – this is the first lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc).
• LinealGradientColor2 – this is the second lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc).

This control has an output property called Value. If you’d like to patch it to a data source, you will use Slider.Value.

Text input

This control has 6 properties:

• Font size – define the size of the text,
• HintText – the text that will be visible before any text is entered,
• Mode – define whether you want the text to be single line, multiline or password. Please use the TextMode function (e.g. TextMode.Multiline).
• LinealGradientColor1 – this is the first lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc).
• LinealGradientColor2 – this is the second lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc).

Card convex, inset, transparent and transparent background

These are decorative cards that allow you to group elements into a form etc. They only have one property – BorderRadius. They are fully scalable so you can expand them both ways.

Pill progress bar – responsive

This control works the same as the animated pill bar, the difference is that although it is not animated, it is fully responsive and can be expanded both ways.

• Value – define the progress that you want to show. This should be an integer without % - the control will automatically calculate the %.
• MaxValue – this is the total value that you want to calculate the percentage against,
• LinealGradientColor1 – this is the first lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc).
• LinealGradientColor2 – this is the second lineal gradient colour. This property accepts the following formats – HEX values, rgb values and color names (blue, green etc).

Mobile navigation menu

This component is based on another component I have previously built. Please follow the instructions here https://github.com/misskristine94/MobileNavigationMenuComponent.