Chúng tôi có thể sử dụng bootstrap trong Power Apps không?

Bài đăng trên blog này sẽ chỉ cho bạn cách tôi tạo thương hiệu trang web Power Pages hiện đại bằng Visual Studio Code, Power Platform CLI, CSS và SCSS. Bằng cách này, mã SCSS của tôi sẽ tự động được biên dịch thành tệp CSS, thêm nó vào thư mục Tệp Web của Cổng thông tin và tải nó lên cùng với phần còn lại của mã cổng thông tin bằng CLI của Cổng thông tin

CÓ – điều này cũng hiệu quả với Power Pages.

Power Pages và Power Apps Portals là cùng một sản phẩm từ góc độ kỹ thuật.
Đọc tất cả về bài đăng blog này của Nick Doelman tại đây.
https. //readyxrm. blog/2022/10/12/power-apps-portals-is-now-power-pages/

1. Sử dụng Portals Design Studio để tải lên tệp css tùy chỉnh có tên là “main. css” với kiểu dáng đơn giản
2. Cài đặt mã phòng thu trực quan
3. Cài đặt phần mở rộng mã Power Platform VS Code
4. Git sao chép kho lưu trữ của bạn và mở nó bằng mã studio trực quan
5. Kết nối với môi trường cổng thông tin của bạn bằng Portals CLI và tải xuống nội dung cổng thông tin
6. Tạo thư mục “SCSS” trong project. Tạo tệp SCSS “chính. scss” và thêm kiểu dáng đơn giản
7. Cài đặt tiện ích mở rộng trình biên dịch Live SASS trong vscode
8. Tạo một thư mục trong dự án có tên “. vscode” và bên trong tạo một tập tin “settings. json”
9. Chèn đoạn mã sau vào tệp
   
10. Kích hoạt “Watch Sass” từ thanh trạng thái và các tệp SCSS sẽ tự động biên dịch thành “main. css” nằm trong thư mục “Tệp Web” trong cấu trúc thư mục cổng thông tin
11. Tải nội dung cổng thông tin lên cổng thông tin
12. Làm mới bộ đệm
13. Mở cổng thông tin trong trình duyệt để xác nhận rằng kiểu dáng đơn giản được áp dụng

Nếu bạn không quá quen thuộc với một số bước;

Thiết lập – phiên bản dài hơn

Tải CSS tùy chỉnh lên trong Portals Design Studio

đi làm. ứng dụng điện. com, mở “Ứng dụng” trong điều hướng bên trái và tìm cổng thông tin của bạn. Chọn “Chỉnh sửa” để mở Portals Design Studio

Mở “Chủ đề” trong menu bên trái, mở “Chỉnh sửa CSS” rồi nhấp vào liên kết “Tải lên CSS tùy chỉnh”

Thao tác này sẽ mở ra hộp thoại cho phép bạn tải tệp CSS lên cổng thông tin. Mở vị trí và chọn tệp chúng tôi vừa tạo khi biên dịch SCSS thành CSS trong Mã VS

Khi chúng tôi mở tệp này, Cổng thông tin sẽ tạo tất cả các kết nối cần thiết với tệp này. và áp dụng kiểu dáng. Chỉ cần nhấn “Lưu” và duyệt qua cổng thông tin của bạn để biết rằng kiểu dáng đã được áp dụng

Điều này sẽ dẫn đến một dự án trong đó bạn có cấu trúc tệp và mã cổng thông tin trong một thư mục có tên cổng thông tin của bạn. Cổng thông tin của tôi được gọi là “cổng thông tin đối tác”

Active Menu Marker trong Power Portals

Cài đặt mã Visual Studio

VS Code là công cụ chỉnh sửa code miễn phí của Microsoft. Nếu bạn chưa cài đặt nó, hãy tìm hiểu thêm tại đây. https. //mã số. Visual Studio. com/tải xuống)

Cài đặt phần mở rộng mã Power Platform VS Code

Tiện ích mở rộng này cho Mã VS giúp dễ dàng xử lý mã Cổng thông tin trực tiếp trong trình chỉnh sửa mã với IntelliSense, các biểu tượng đẹp mắt và đưa giao diện Dòng lệnh Power Platform (CLI) vào Mã VS.
Thông tin thêm trong bài đăng trên blog này. https. // ứng dụng điện. Microsoft. com/en-us/blog/power-platform-extension-for-vs-code.
Liên kết trực tiếp để cài đặt. https. //thương trường. Visual Studio. com/items?itemName=microsoft-IsvExpTools. nền tảng điện-vscode

Git sao chép kho lưu trữ của bạn và mở nó bằng mã studio trực quan

Một trong những khả năng quan trọng nhất mà phương pháp này cho phép là kiểm soát nguồn. Tìm hiểu thêm về cách bạn làm việc với Git và Mã VS bằng cách nhấp vào liên kết này

Kết nối với môi trường cổng thông tin của bạn bằng Portals CLI

Tìm hiểu cách thực hiện tại đây. https. // tài liệu. Microsoft. com/en-us/powerapps/maker/portals/power-apps-cli)

pac auth create -u [dynamics365-evrironment-url]  

(Làm theo thủ tục đăng nhập)

pac paportal list

Nhận id cổng từ danh sách cổng

Tải xuống nội dung Cổng thông tin

pac paportal download --path C:\code\[project-folder-name]-id [portal-id]

Xây dựng thương hiệu Canvas Power Apps

Thiết lập tệp SCSS

Tạo một thư mục khác làm anh chị em với thư mục cổng có tên “SCSS”

Tạo các tệp này trong thư mục

• "_biến. scss”
• “_basestyles. scss”
• "chủ yếu. scss”

“Chính. scss” sẽ là mẹ của tất cả các tệp scss của bạn. Trong phần “chính. scss” chèn đoạn mã sau

@import “biến”;
@import “kiểu cơ sở”;

Bây giờ, hãy tạo các tệp khác trong thư mục của bạn để giữ kiểu dáng của bạn. Có nhiều cách để cấu trúc phong cách của bạn và có một số tiêu chuẩn và phương pháp hay nhất

You can download and use this SCSS boilerplate that follows the 7-1 structure from GitHub: 
https://github.com/KittyGiraudel/sass-boilerplate
Learn more about SCSS architecture here: https://sass-guidelin.es/#architecture

Để bắt đầu đơn giản, bạn có thể tạo một vài tệp cần thiết để bắt đầu

• _biến. scss. Đặt tất cả các biến của bạn vào đây;
• _mixins. scss. Web có đầy đủ các mixin thông minh mà bạn có thể sử dụng để làm việc thông minh với kiểu dáng. Tập hợp tất cả chúng trong một tệp
• _bootstrap-sửa. scss. Bootstrap có một số kiểu dáng mặc định mà bạn sẽ cần phải giải quyết. Để chúng trong một tệp riêng biệt sẽ giúp cập nhật chúng dễ dàng hơn khi (nếu?) phiên bản bootstrap của cổng thông tin được cập nhật
• _những yếu tố chính. scss. Giữ kiểu dáng cho đầu trang, chân trang, bố cục và mẫu riêng biệt
• _basestyles. scss. Đặt kiểu cho danh sách, biểu mẫu, bảng, thành phần điều hướng, v.v. Đây là những phần tử có thể tái sử dụng mà bạn tạo kiểu một lần và sử dụng ở mọi nơi
• _nút. scss. Khi một phần trong “basestyles” trở nên quá lớn, tôi chia nó thành một tệp riêng, chẳng hạn như các nút

Hãy để mã của bạn phát triển từ thời điểm này một cách tự nhiên nếu bạn thích – hoặc bắt đầu với một cấu trúc phù hợp với quy mô dự án của bạn. Điều quan trọng nhất là sử dụng tên mô tả mà hầu hết mọi người sẽ hiểu và giữ cho cấu trúc nhất quán nhất có thể. Sử dụng các nhận xét xuyên suốt các tệp của bạn để mô tả những gì bạn đang làm và để lại các mẩu bánh mì ở nơi bạn có thể tìm thấy kiểu dáng liên quan trong cấu trúc của mình

Are you new to SCSS files and how the syntax works and what it can do? Learn more here: 
https://sass-lang.com/documentation/syntax

Tùy chỉnh trang đăng nhập và đăng ký trong Cổng thông tin Power App

Biên dịch SCSS

Cài đặt trình biên dịch Live SASS

Khi bạn có các tệp SCSS đầy phong cách tuyệt vời, bạn cần biên dịch chúng thành một tệp CSS mà cổng thông tin có thể hiểu được. Tôi sử dụng tiện ích mở rộng “Live Sass Compile” cho Mã VS cho công việc này. Đọc thêm về tiện ích mở rộng tại đây

https. //thương trường. Visual Studio. com/items?itemName=glenn2223. sống-sass

Cài đặt tiện ích mở rộng trình biên dịch Live SASS trong mã VS từ đây. https. //thương trường. Visual Studio. com/items?itemName=glenn2223. sống-sass

Tên. Trình biên dịch Sass trực tiếp
Id. glenn2223. live-sass
Mô tả. Biên dịch Sass hoặc Scss thành CSS theo thời gian thực.
Phiên bản. 5. 4. 0
Nhà xuất bản. Glenn Marks
VS Marketplace Link. https. //thương trường. Visual Studio. com/items?itemName=glenn2223. trực tiếp

Tạo thư mục ". vscode”

Tạo một thư mục trong dự án có tên. vscode
Bên trong. vscode tạo cài đặt. json
Chèn đoạn mã sau vào tệp.

{
    "liveSassCompile.settings.formats":[
	{
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/partner-portal/web-files"
	}
    ],
}



Code language: JSON / JSON with Comments (json)

Điều này sẽ dẫn đến một dự án trong đó bạn có cấu trúc tệp và mã cổng thông tin trong một thư mục có tên cổng thông tin của bạn. Cổng thông tin của tôi được gọi là “cổng thông tin đối tác”

Khi tiện ích mở rộng được cài đặt và kích hoạt, bạn sẽ thấy nút “Xem Sass” trên thanh trạng thái ở cuối không gian làm việc Mã VS của bạn

Khi phần mở rộng trình biên dịch của bạn đang hoạt động, nó sẽ tự động biên dịch các tệp và thông báo cho bạn về bất kỳ lỗi nào trong quá trình thực hiện

Kết quả là một tệp CSS trong thư mục "Tệp web" của cổng thông tin của bạn sẽ tải lên cùng với phần còn lại của mã cổng thông tin

Tải lên mã Cổng thông tin

Bây giờ chúng tôi đã thiết lập cấu trúc tệp và các tệp ban đầu. Bây giờ chúng tôi cần tải các tệp này lên cổng thông tin. Chúng tôi sử dụng Portal CLI cho việc này

Mở “Windows Powershell” và kết nối với cổng thông tin của bạn bằng Portals CLI

Need more information about how this works? This is where you find all the commands and how to use Portals CLI: https://docs.microsoft.com/en-us/powerapps/maker/portals/power-apps-cli#microsoft-power-platform-cli-commands-for-portals

Sử dụng CLI của Cổng thông tin để tải xuống lại nội dung cổng thông tin của bạn và tất cả các kết nối sẽ tuân theo. Bây giờ, khi bạn thay đổi các tệp SCSS và biên dịch chúng thành “chính. css”, sau đó tải nó lên cổng thông tin, kiểu dáng mới sẽ được áp dụng

Kiểm soát nguồn

Khi bạn thực hiện các thay đổi đối với mã cổng trong Mã VS, bạn có thể chuyển giao các thay đổi cho git và có toàn quyền kiểm soát nguồn

Warning! When you are multiple people working on the same portal project make sure that you communicate well on what areas of the portal you are working on - and let each other know whenever you need to upload code to the portal. I have overwritten my own and other developers' portal config when uploading code to the portal. 

Tôi muốn biết thêm về cách bạn làm việc với xây dựng thương hiệu cổng thông tin. Vui lòng để lại nhận xét về bài viết trên blog này và cho tôi biết

Bootstrap được sử dụng như thế nào trong cổng thông tin Power Apps?

Power Apps có hỗ trợ CSS không?

Power Apps không tốt cho điều gì?

Ngôn ngữ nào được sử dụng trong Power Apps?