Power Apps UI Cooker

About Author

Release Notes

Custom Functions

Custom Components

Explore

Custom Components

Language Bar

MyCondy

Last edited 28 days ago by MyCondy

Easy component for your various languages in an app.

How to design it in Power Apps

Preview

⁠

⁠

⁠

What does it consist of?

2x Container

3x Image

1x Text PCF

1x Label

2x Vertical Gallery

Procedure

Step 1 - create boolean variable on Screen

When you create a new screen(or use already created) you should create a variable on "OnVisible" property:

Set(_var_open_lang,false)

Step 2 - create a gallery with data

Add a new Vertical Gallery object, call it "DataGallery" with this "Data source" property:

["Čeština","English"]

With two items - Image and Label.

Input

⁠

⁠

Output

⁠

⁠

You can upload 2 flag images (czech-republic, united-kingdom) or you can use SVG icons in Power Apps.

Create an Image object, call it "image_flag" with Image property:

If(Title.Text = "English",'united-kingdom','czech-republic')

and Title object, call it "Title" with Text property:

ThisItem.Value

You can save this gallery in a separate Screen, something like "DropdownDataScreen". It is up to you.

Step 3 - create language bar container

Add a new Vertical Container PCF object, call it "LanguageBar" with this "DropShadow" property:

DropShadow.Regular

Add a new Horizontal Container PCF object under "LanguageBar", call it "InputLanguageBar" with this "DropShadow" property:

DropShadow.None

Step 4 - connect language gallery with data

Add a new Vertical Gallery object, call it "LanguageGallery" with this "Data source" property:

DataGallery.AllItems

with Visible property:

_var_open_lang

And Label object under gallery with Text property:

ThisItem.Value

And Image object under the gallery with Image property:

ThisItem.image_flag.Image

For these 2 objects put this code for "OnSelect" property:

Set(_var_open_lang,false)

Step 5 - create title of selected language

Add a new Text PCF object, call it "SelectedLang" with this "Text" property:

LanguageGallery.Selected.LanguageTextTitle.Text

This is an output:

⁠

⁠

How to design it in Figma

Preview

⁠

⁠

What does it consist of?

1x Frame

2x SVG

1x Text

Procedure

Step 1 - create a horizontal frame with auto layout

Add a new Frame (F command) with horizontal auto layout (SHIFT + A command) object, call it "langbar_LanguageBar" with these properties:

⁠

⁠

⁠

Step 2 - create a content for the parent frame

Import a new SVG file under a "langbar_LanguageBar" frame, call it "svg_flag" with this XML code:

</g>

<defs>

</clipPath>

</defs>

</svg>

Add a new Text (T command) object under a "langbar_LanguageBar" frame, call it "languageName" with these properties:

⁠

⁠

Import a new SVG file under a "langbar_LanguageBar" frame, call it "svg_down" with this XML code:

</svg>

This is an output:

⁠

⁠

How to use it via DesignKit

Prerequisites

the designed component according to the instructions from the previous section

Used Prefixes

langbar = Custom Component represents Language bar in Power Apps

YAML Output

⁠

Used Colours

Container Background - #FFFFFF

Language Text - #474540

⁠

← Info Popup with Button⁠

⁠

Light/Dark Mode →⁠

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.