Skip to content
Easy component for your various languages in an app.
How to design it in Power Apps
Preview
What does it consist of?
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?
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:
<svg width="60" height="36" viewBox="0 0 60 36" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_3303_3197)">
<path d="M0 0V36H60V0H0Z" fill="#0A17A7"/>
<path d="M0 0L60 36L0 0ZM60 0L0 36L60 0Z" fill="black"/>
<path d="M0 0L60 36M60 0L0 36" stroke="white" stroke-width="7.2"/>
<path d="M0 0L60 36L0 0ZM60 0L0 36L60 0Z" fill="black"/>
<path d="M0 0L60 36M60 0L0 36" stroke="#C8102E" stroke-width="2.94"/>
<path d="M0 14.4H26.4V0H36V14.4H62.4V24H36V38.4H26.4V24H0V14.4Z" fill="#C8102E" stroke="white" stroke-width="2.4"/>
</g>
<defs>
<clipPath id="clip0_3303_3197">
<rect width="60" height="36" fill="white"/>
</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 width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M7.15485 12.9882C7.80573 12.3373 8.861 12.3373 9.51188 12.9882L20 23.4763L30.4882 12.9882C31.139 12.3373 32.1944 12.3373 32.8452 12.9882C33.496 13.639 33.496 14.6943 32.8452 15.3452L21.1785 27.0118C20.5277 27.6627 19.4724 27.6627 18.8215 27.0118L7.15485 15.3452C6.50399 14.6943 6.50399 13.639 7.15485 12.9882Z" fill="black"/>
</svg>
This is an output:
How to use it via DesignKit
Prerequisites
Used Prefixes
YAML Output
Used Colours
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.