CSS PowerApps
|
Có, CSS cho PowerApps, đại loại thế. Biểu định kiểu dựa trên CSS thực tế là không thể, nhưng điều tốt nhất tiếp theo là. Chúng ta có thể tạo một vài đối tượng để lưu trữ các kiểu của mình, chẳng hạn như màu sắc, kích thước phông chữ, kích thước, v.v. và sau đó tham khảo chúng trên ứng dụng. Không thực sự xếp tầng biểu định kiểu, nhưng hãy gọi chúng chỉ là biểu định kiểu. ;) Show
Để tạo biểu định kiểu của bạn, bạn sẽ muốn tạo một đối tượng mới và sau đó đặt các thuộc tính của nó thành các giá trị kiểu của bạn. Tôi đề xuất một đối tượng khác cho mỗi nhóm thuộc tính. Điều này sẽ giúp ích cho bạn sau này cũng như những người dùng khác muốn sửa đổi ứng dụng Đây là biểu định kiểu mà tôi đã thực hiện trong các ứng dụng của mình Set(colColors,
{
PrimaryGreen: RGBA(13,160,13,1),
PrimaryBlue: RGBA(12,12,160,1),
PrimaryBlack: RGBA(0,0,0,.6),
AccentDarkGray: RGBA(100,100,100,1),
AccentLightGray: RGBA(200,200,200,1)
});
Set(colFonts,
{
Title: Font.'Lato Light',
TitleSize: 35,
SubTitle: Font.'Lato Hairline',
SubTitleSize: 28,
AppTitleSize: 50,
Button: Font.Arial,
ButtonSize: 25,
Body: Font.Lato,
BodySize: 21,
Note: Font.Georgia,
NoteSize: 20,
ItemTitle: Font.'Lato Black',
ItemTitleSize: 22,
ItemBody: Font.Lato,
ItemBodySize: 20
});
Set(colLayouts,
{
ScreenTitleX: 40,
ScreenTitleY: 40,
FormButtonX: 300,
FormButtonY: 1030,
FormButtonHeight: 70,
FormButtonWidth: 300
})Như bạn có thể thấy, tôi đã đặt màu sắc và phông chữ, thậm chí cả vị trí tôi muốn đặt tiêu đề và nút biểu mẫu, trên mỗi màn hình trong ứng dụng Mã này được đặt trong thuộc tính OnVisible của màn hình chính để mỗi khi ứng dụng mở ra, tất cả các giá trị kiểu này đều có sẵn cho phần còn lại của ứng dụng Từ đây, sử dụng các thuộc tính khi cần, bằng cách gọi thuộc tính của đối tượng, i. e. XongKhá dễ dàng phải không? Một mẹo là sao chép/dán các đối tượng tương tự trên cùng. Có thể rất tẻ nhạt khi đặt các thuộc tính này cho mọi đối tượng bạn cần. Ví dụ: khi bạn tạo trang mới, hãy sao chép tiêu đề từ màn hình trước đó và dán vào màn hình mới của bạn. Các thuộc tính mang theo nó, vì vậy tất cả những gì bạn phải làm là thay đổi văn bản Nhận giá trị Combo-Box đã đặt với cột lựa chọn trong ứng dụng canvas Power AppsỨng dụng canvas Cộng đồng Dynamics 365 - Ngày 5 tháng 1 năm 2023 Sử dụng tối ưu tính năng 'Cài đặt' trong Power AppsPower Apps Cộng đồng Dynamics 365 - Ngày 4 tháng 1 năm 2023 Đặt quyền sở hữu Bảng trong powerappsỨng dụng Power Cộng đồng Power Platform - Ngày 3 tháng 1 năm 2023 Inogic Top 5 mẹo dành cho người dùng Microsoft Dynamics 365 CRM & Power Apps năm 2022Tương tác của khách hàng Cộng đồng Dynamics 365 - Ngày 2 tháng 1 năm 2023 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.
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ơnTả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 StudioVS 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 CodeTiệ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. Git sao chép kho lưu trữ của bạn và mở nó bằng mã studio trực quanMộ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 CLITì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 tinpac 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 SCSSTạ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
“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”; 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
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 SCSSCài đặt trình biên dịch Live SASSKhi 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 Tạo thư mục ". vscode”Tạo một thư mục trong dự án có tên. vscode
Đ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 tinBâ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ồnKhi 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 ________số 8Tô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 Bạn có thể sử dụng CSS với Power Apps không?Mặc dù CSS thực tế là không thể , nhưng chúng tôi có thể làm một số việc. Tạo một CSS giả bằng cách tạo một đối tượng và xác định các giá trị kiểu dáng. Sử dụng CSS nội tuyến trong HTMLText. Tạo Chủ đề để xác định trước phong cách.
Tôi có thể sử dụng JavaScript và CSS trong Power Apps không?Lại. Power Apps - Cách thêm mã JavaScript và tệp CSS
. I will strongly suggest to use SPFx web part to accomplish this, it might require some initial effort to get started if you are not well verse with the technology stack but end result will be good with a better outcome.
Power Apps có khó không?Một lợi ích khác của PowerApps là nhiều bài đánh giá khác nhau cho thấy rằng PowerApps không dễ sử dụng đối với mọi người nhưng cực kỳ dễ học .
Nhà phát triển Power Apps có cần thiết không?Có nhu cầu cao trong ngành công nghiệp phần mềm tùy chỉnh cho các ứng dụng và sự thiếu hụt các nhà phát triển. Đối với tôi, điều khiến Power Platform trở thành một kỹ năng hấp dẫn như vậy là các công ty có con đường áp dụng dễ dàng hơn nhiều. Rất khó để triển khai một ứng dụng Python nhưng việc triển khai Power Apps lại tương đối dễ dàng |
