diff --git a/power-apps/form-factor-selector/README.md b/power-apps/form-factor-selector/README.md new file mode 100644 index 0000000..55b7db2 --- /dev/null +++ b/power-apps/form-factor-selector/README.md @@ -0,0 +1,25 @@ +Form factor selection in editor + +Allow you to change the form factor in edit mode, helping you to design responsive applications + +msedge_rcavLxE04h + +⚠️⚠️⚠️ Important: + + Set Gallery.Y to : -Self.Height + + + You need to replace for every screen properties, otherwise screen will not be affected by your formfactor selection : + + Width : + Max(App.Width, App.MinScreenWidth) + + by : + Coalesce(vFormFactor.Width,Max(App.Width, App.MinScreenWidth)) + Height : + Max(App.Height, App.MinScreenHeight) + + by : + Coalesce(vFormFactor.Height,Max(App.Height, App.MinScreenHeight)) + +sample_tablet_landscapesample_tablet_portrait.pngphone_portrait.png diff --git a/power-apps/form-factor-selector/assets/formfactorselector.png b/power-apps/form-factor-selector/assets/formfactorselector.png new file mode 100644 index 0000000..f07a4f8 Binary files /dev/null and b/power-apps/form-factor-selector/assets/formfactorselector.png differ diff --git a/power-apps/form-factor-selector/assets/sample.json b/power-apps/form-factor-selector/assets/sample.json new file mode 100644 index 0000000..bcfe8f4 --- /dev/null +++ b/power-apps/form-factor-selector/assets/sample.json @@ -0,0 +1,49 @@ +[ + { + "$schema": "https://developer.microsoft.com/en-us/json-schemas/pnp/samples/v1.0/metadata-schema.json", + "name": "pnp-powerplatform-snippets-form-factor", + "version": "1.0.0.0", + "source": "pnp", + "creationDateTime": "2025-05-18T00:00:00.000Z", + "updateDateTime": "2025-05-18T00:00:00.000Z", + "title": "Form factor for power apps editor", + "shortDescription": "Allow you to change the form factor in edit mode", + "longDescription": [ + "Allow you to change the form factor in edit mode, helping you to design responsive applications. 5 formats are present : smartphone & tablet, landscape & portrait for both plus laptop. You can customize or add your own formats" + ], + "url": "https://github.com/DavidZoon/powerplatform-snippets/blob/main/power-apps/form-factor-selector/", + "products": [ + "Power Platform", + "Power Apps", + "powerplatform-snippets", + "power-apps-snippets" + ], + "tags": [], + "categories": [], + "metadata": [ + { + "key": "Product", + "value": "Power Apps" + }, + { + "key": "Type", + "value": "Snippet" + } + ], + "thumbnails": [ + { + "type": "image", + "order": 100, + "url": "https://github.com/DavidZoon/powerplatform-snippets/raw/main/power-apps/form-factor-selector/assets/formfactorselector.png", + "alt": "Preview PNG" + } + ], + "authors": [ + { + "gitHubAccount": "DavidZoon", + "name": "Dvid Zoonekyndt", + "pictureUrl": "https://github.com/DavidZoon.png" + } + ] + } +] diff --git a/power-apps/form-factor-selector/assets/sample_phone_portrait.png b/power-apps/form-factor-selector/assets/sample_phone_portrait.png new file mode 100644 index 0000000..f290f8f Binary files /dev/null and b/power-apps/form-factor-selector/assets/sample_phone_portrait.png differ diff --git a/power-apps/form-factor-selector/assets/sample_tablet_landscape.png b/power-apps/form-factor-selector/assets/sample_tablet_landscape.png new file mode 100644 index 0000000..6cbde75 Binary files /dev/null and b/power-apps/form-factor-selector/assets/sample_tablet_landscape.png differ diff --git a/power-apps/form-factor-selector/assets/sample_tablet_portrait.png b/power-apps/form-factor-selector/assets/sample_tablet_portrait.png new file mode 100644 index 0000000..a958b32 Binary files /dev/null and b/power-apps/form-factor-selector/assets/sample_tablet_portrait.png differ diff --git a/power-apps/form-factor-selector/source/formfactor.yaml b/power-apps/form-factor-selector/source/formfactor.yaml new file mode 100644 index 0000000..fed9d5c --- /dev/null +++ b/power-apps/form-factor-selector/source/formfactor.yaml @@ -0,0 +1,48 @@ +- FormFactorSelector_1: + Control: Gallery@2.15.0 + Variant: Vertical + Properties: + Height: =44 + Items: |- + =/* + Put form factors un this table, put this table in a named formula if you wish to swap format from different screens + Replace in every screen : + Width : + Max(App.Width, App.MinScreenWidth) + + by : + Coalesce(vFormFactor.Width,Max(App.Width, App.MinScreenWidth)) + Height : + Max(App.Height, App.MinScreenHeight) + + by : + Coalesce(vFormFactor.Height,Max(App.Height, App.MinScreenHeight)) + */ + Table( + {Index:1,Name:"Smartphone Portrait",Width:360,Height:800,Icon:$""}, + + {Index:2,Name:"Smartphone paysage",Width:800,Height:360,Icon:$""}, + + {Index:3,Name:"Tablette Portrait",Width:800,Height:1280,Icon:$""}, + + {Index:4,Name:"Tablette Paysage",Width:1280,Height:800,Icon:$""}, + + {Index:5,Name:"Laptop",Width:1920,Height:1080,Icon:""}, + + {Index:6,Name:"Reset",Width:Blank(),Height:Blank(),Icon:$""} + ) + TemplatePadding: =0 + TemplateSize: =44 + Width: =400 + WrapCount: =6 + X: '=0 ' + Y: =-Self.Height + Children: + - Image3_2: + Control: Image@2.2.3 + Properties: + Height: =Parent.TemplateHeight + Image: ="data:image/svg+xml;utf8, " & EncodeUrl(Substitute(ThisItem.Icon,"