Skip to content

Commit c202308

Browse files
Learn Build Service GitHub AppLearn Build Service GitHub App
authored andcommitted
Merging changes synced from https://github.com/MicrosoftDocs/powerapps-docs-pr (branch live)
2 parents 269b154 + 87f9f96 commit c202308

File tree

4 files changed

+77
-0
lines changed

4 files changed

+77
-0
lines changed

powerapps-docs/maker/TOC.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -686,6 +686,8 @@
686686
href: ./canvas-apps/set-aspect-ratio-portrait-landscape.md
687687
- name: Create responsive layout
688688
href: ./canvas-apps/create-responsive-layout.md
689+
- name: Understand app functionality through code view (preview)
690+
href: ./canvas-apps/code-view.md
689691
- name: Configure app functionality
690692
items:
691693
- name: Get started with formulas
Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
---
2+
title: Understand your app's functionality through code view (preview)
3+
description: Understanding app functionality through code view for canvas apps.
4+
author: marcelbf
5+
6+
ms.custom: canvas
7+
ms.collection: get-started
8+
ms.topic: conceptual
9+
ms.reviewer: mkaur
10+
ms.date: 5/14/2024
11+
ms.subservice: canvas-maker
12+
ms.author: marcelbf
13+
search.audienceType:
14+
- maker
15+
- developer
16+
---
17+
# Understand app functionality through code view (preview)
18+
19+
[This article is prerelease documentation and is subject to change.]
20+
21+
Use code view to see your app's underlying code to better understand the app's functionality. Each control on the screen has a code representation that uses a format that is a subset of YAML and an improvement from the [YAML formula grammar](/power-platform/power-fx/yaml-formula-grammar).
22+
23+
With code view you can:
24+
25+
- See a code representation of each control on your screen.
26+
- Copy a control as code and share outside of Power Apps Studio.
27+
- Copy an paste a control as code and create new control based on the copied code.
28+
29+
> [!IMPORTANT]
30+
> - Format is subjected to change. We don’t guarantee compatibility with the final version.
31+
> - The current code format isn't suitable to source control during the preview period.
32+
33+
## Prerequisites
34+
35+
The Power Fx formula bar must be turned on to view the code for a control.
36+
37+
The formula bar is **ON** by default for new apps. For existing apps, follow these steps to turn on the Power Fx formula bar:
38+
- Open our app in Power Apps Studio, select **Settings** > **Upcoming features** > **Preview** > set the **Power Fx formula bar** toggle to **ON**.
39+
40+
41+
## View, copy, and paste code
42+
43+
The **View code** feature shows the code for the selected control and all underlying controls. You can also use the shortcut **Ctrl + F** to find a specific string in the code.
44+
45+
Follow these steps to view, copy, and paste the code for a control:
46+
47+
1. Open your app for [editing](edit-app.md) in Power Apps Studio.
48+
1. **Right-click** on the control in the **Tree view** or on the screen or and then select, **View code (preview)**.
49+
50+
:::image type="content" source="media/code-view/view-code.png" alt-text="View code for a control":::
51+
52+
1. Select **Copy code** and then paste the copied code into any window outside of your browser.
53+
54+
1. To generate a new control from the copied code, right-click on the control where you want to create a new control and the select, **Paste code (preview)**.
55+
56+
:::image type="content" source="media/code-view/paste-code.png" alt-text="Paste code ":::
57+
58+
59+
You must use the YAML format that's generated by Power Apps Studio. The code also goes through validation check before it's created.
60+
61+
## Know limitations
62+
63+
* You can't copy and paste and there’s no code view for the **App Object**.
64+
* You can’t edit the code in the code view.
65+
* You can only copy controls that are on a screen. Copying a screen isn't supported.
66+
67+
This article provides an overview of working with formulas. For more detailed information about functions, operators, and other building blocks, see [Formula reference](formula-reference.md).
68+
69+
### See also
70+
71+
[YAML format](/power-platform/power-fx/yaml-formula-grammar)
72+
[Formula bar](formula-bar-find-replace.md)
73+
[Use Find and Replace capability in the formula bar](formula-bar-find-replace.md)
74+
75+
[!INCLUDE[footer-include](../../includes/footer-banner.md)]
Loading
Loading

0 commit comments

Comments
 (0)