Microsoft Power Pages in Action E-Book

Faisal Hussona

• Herausgeber: Packt Publishing
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 417

Veröffentlichungsjahr: 2024

Beschreibung

Microsoft Power Apps Pages in Action is a comprehensive beginner's guide for effortlessly building and customizing functional-rich web apps. Packed with real-world examples, it offers a practical understanding of the Power Pages environment.
You’ll understand web pages by creating data tables and forms, progress to adding web pages, and delve into advanced techniques for seamlessly integrating web apps. Now, you’ll learn how to create responsive web pages, automate web apps, and use ChatGPT-assisted coding with code snippets for common requirements or needs. As you progress, you'll be guided on crafting portals and websites, encompassing the utilization of various functionalities and layouts. Progressively, you’ll discover how to seamlessly integrate them into your web pages across multiple Microsoft technologies, including Dataverse and Power Automate. Towards the end, you'll also learn how to implement cloud flows to provide access to external services and use cloud flows to provide user experiences running processes off the page.
By the end of the book, you’ll have a solid understanding of Power Pages and be able to create web applications tailored to your unique needs.

Leseprobe

Microsoft Power Pages in Action

Accelerate your low-code journey with functional-rich web apps using Power Pages

Faisal Hussona

Microsoft Power Pages in Action

Copyright © 2024 Packt Publishing

All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews.

Every effort has been made in the preparation of this book to ensure the accuracy of the information presented. However, the information contained in this book is sold without warranty, either express or implied. Neither the author nor Packt Publishing or its dealers and distributors will be held liable for any damages caused or alleged to have been caused directly or indirectly by this book.

Packt Publishing has endeavored to provide trademark information about all of the companies and products mentioned in this book by the appropriate use of capital. However, Packt Publishing cannot guarantee the accuracy of this information.

Group Product Manager: Aaron Tanna

Publishing Product Manager: Uzma Sheerin

Senior Content Development Editor: Rosal Colaco

Book Project Manager: Deeksha Thakkar

Technical Editor: Rajdeep Chakraborty

Copy Editor: Safis Editing

Indexer: Rekha Nair

Production Designer: Prafulla Nikalje

DevRel Marketing Coordinator: Deepak Kumar and Mayank Kumar

First published: June 2024

Production reference: 1140624

Published by Packt Publishing Ltd.

Grosvenor House

11 St Paul’s Square

Birmingham

B3 1RB, UK

ISBN 978-1-83763-045-5

www.packtpub.com

Contributors

About the author

Faisal Hussona, a seasoned IT professional with over two decades of experience, specializes in developing and implementing technology solutions across diverse industries, with a particular focus on Power Platform and Dynamics 365. His successful track record includes delivering projects that emphasize promoting citizen developers and facilitating technology transfer. Throughout his 25-year career, Faisal has mentored and trained individuals, transferring knowledge and development skills to various organizations. His expertise in Power Platform and Dynamics 365 has led to successful projects, particularly in improving business processes and enhancing customer experience.

About the reviewer

Danilo Capuano is a Low Code Practice Lead and Office Manager at Agic Technology. He is 6x Microsoft Certified Trainer and 1x Microsoft MVP.

Danilo helps companies scale innovation with Microsoft Power Platform and Dynamics 365 CRM. He is active in the Microsoft community in Italy, being a group leader for Power Apps User Group Italia, Power Pages User Group Italia, and Copilot User Group Italia. He has previously worked as a technical reviewer on several other titles, including Microsoft Power Platform Enterprise Architecture, Fundamentals of CRM with Dynamics 365 and Power Platform, Learn Microsoft Power Apps, Mastering Microsoft Dynamics NAV 2016, Microsoft Dynamics NAV 7 Programming Cookbook, Microsoft Dynamics NAV 2013 Application Design and Programming Microsoft Dynamics NAV 2015.

Table of Contents

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Conventions used

Get in touch

Share Your Thoughts

Download a free PDF copy of this book

1

Modernizing Rob the Builder’s Business with Power Pages

Empowering Rob the Builder’s transformation

Brenda’s revelation

Lost opportunities and health and safety compliance

Brenda’s niece, Sarah, enters the scene

Power Pages – a vision unveiled

Power Pages – a paradigm shift

Use case – establishing and utilizing a comprehensive information system with Power Pages

Understanding Power Pages’ role

Power Platform’s no-code/low-code magic

Bridging technology gaps with Power Pages

Setting the stage – tenancy and Power Pages

Laying the foundation – what is a tenancy?

Establishing a tenancy for Rob the Builder

Step 1 – Registering for Microsoft 365 and setting up a new tenant

Step 2 – Creating new environments

Step 3 – Power Pages setup

Step 4 – Power Pages studio

Navigating the developer’s landscape

Exploring the Power Platform

Tools for Power Pages development

Configuring the environment for seamless collaboration

Summary

2

Power Pages Design Studio

Planning the website structure

User story – crafting a modern website for Rob the Builder

Acceptance criteria

Tasks

Template selection and website vision

Developing the new website

Building the home page

Building the website pages

Content management and organization in the Power Pages design studio

Defining the website’s hierarchy

Developing websites and deploying them to production

Setting the website to public

Summary

3

Power Pages Studio – Styling and Themes

Introduction to CSS

Modifiable styles in Power Pages Studio

Accessing CSS features in Power Pages Studio

Accessing the CSS code

Implementing basic CSS customizations

Create a custom CSS file

Changing the website’s logo

Adding web file images

Incorporating advanced CSS techniques

Summary

4

Dataverse Tables and Forms

Planning your development

Developing the user story

Planning the data model

Planning out the Dataverse forms

Planning out the web roles

Planning table permissions configuration

Planning your implementation in the recommended order

Practical example – developing the data model

Creating tables in Dataverse

Creating table relationships in Dataverse

Creating table columns

Views

Designing Dataverse forms

Insert forms

Edit forms

Timeline control

Summary

5

Table Permissions and Security

User story – table permissions for access to Dataverse

Self-access permissions

Global access permissions

Contact access permissions

Account access permissions

Child access permissions

The architecture of table permissions

Practical applications and benefits

Privileges and relationships in Dataverse architecture

Implementation of table permissions in Power Pages

Summary

6

Basic Forms, Lists, and Web Pages

Technical requirements

Integration of Dataverse tables with Power Pages forms, lists, and web pages

Basic forms

Creating an insert form and web page

The Incident insert basic form

The Incident insert web page

Power Pages Management web page configuration

Website sync – testing your work

Creating an edit form and web page

The Incident edit basic form

Basic form options

Additional settings – Allowing attachments

Configuring action buttons

Configuring Basic Form Metadata options

The Incident edit web page

On Success Settings tab of the Incident insert form

Creating an incident read-only page

Creating a list page

Configuring action buttons

List Search

Summary

7

JavaScript and jQuery

JavaScript and jQuery – an overview

jQuery and its role in Power Pages development

The basic form JavaScript field

The OnReady function

Implementing the OnReady function

Managing field requirements with JavaScript and jQuery

Controlling field visibility with JavaScript and jQuery

Setting a field as required/not required

Understanding field syntax with JavaScript and jQuery

String field

Number field

Date field

Choice field

Choice field with checkboxes

Reference lookup field

Leveraging jQuery AJAX in Power Pages

Debugging JavaScript and jQuery

Using JavaScript and jQuery libraries

Using Chart.js in Power Pages

Summary

8

Web Templates and Liquid

Web templates overview

Common Code

Web templates example

Use case – Agile user story

Creating a web template

Accessing the web template editor

Editing an existing web template in Power Pages code editor

Defining the layout

Adding dynamic content with Liquid

Saving and applying the web template

Introduction to Liquid

Getting started with Liquid in web templates

Using Liquid objects in Power Pages

Breadcrumbs web template explained

Using Liquid tags in Power Pages

Using Liquid filters in Power Pages

Syntax for using filters

Example – Using the has_role filter

Commonly used filters

Advanced Liquid concepts for Power Pages

Interacting with Dataverse

Iterating over collections

Performing conditional logic

Debugging web templates and Liquid

Syntax errors

Logging output

Liquid tags and filters

Liquid objects and variable scope

Logging and error handling

Best practices for using web templates and Liquid in Power Pages

Consistent naming and structure

Modular approach

Commenting and documentation

Performance optimization

Testing and validation

Version control

Security considerations

Keep up with updates and best practices

Summary

9

Workflow Automation

Power Pages workflow

Key components of a workflow

The benefits of workflows in Power Pages

Creating a notification with Dataverse Workflow

Agile user story – creating a notification with Dataverse Workflow

Workflow implementation

Creating a Power Pages workflow button

Agile user story – creating a workflow button for incident status

Workflow implementation

Best practices for processes and automation

Summary

10

Power Pages and Cloud Flows

The key features of Power Automate in Power Pages

Integration with Power Automate

Use case – automating email notifications for timesheet approvals

Acceptance criteria

Cloud flow triggered by Dataverse

Designing a notification cloud flow

Implementation

Cloud flow integrated with Power Pages

Design

Implementation

Web template JavaScript

Summary

11

Charts, Dashboards, and Power BI

Understanding charts and dashboards

Exploring chart types and use cases

The role of dashboards in business performance

Leveraging Liquid chart tags for custom web templates

Demonstrating how to create custom web templates

Agile user story – creating custom web templates with Liquid chart tags

The flexibility of Liquid chart tags

Embedding Microsoft Dataverse charts in Power Pages

Step-by-step guide on embedding Microsoft Dataverse Charts

Data for charts

Understanding different data retrieval methods

Best practices for data preparation and organization

Ensuring data accuracy and real-time updates

Designing visually appealing charts and dashboards

Creating interactive dashboards with Power BI

Customizing pages for Power BI dashboards

Summary

12

REST Integration

What is REST?

Versatility for web services and integrations

REST in Power Pages

Agile user story – Xero with Power Pages integration

Design for the Xero API integration process

Researching the API and Postman

Implementation of Xero API integration

POST process and designing batch submission in a Power Automate flow

The Power Automate child flow to post invoices

Adding a Power Pages triggered Power Automate cloud flow

Authentication button and login page

Code for the login button

XeroResponse page

Web template

Liquid

JavaScript

Xero response web page content

Custom column

Summary

13

Creating a PDF File from Dataverse

Agile user story – create invoice PDF

Design of the invoice PDF generation process

Design choices

Office Word template

Power Automate cloud flow

Conversion step with OneDrive

HTML layout and styling

Visual flow

Implementation of the invoice PDF process

Dataverse table implementation

Word template

Power Automate cloud flow

Injecting HTML into a basic form web page

Summary

14

Modal Windows

Basic form filtered lookup

Agile user story 1 – filtering placement rates in Timesheet Costs form

Design Filtered Lookup on basic form modal window

Implementing the filtered lookup on a basic form modal window

Liquid code in the Timesheet’s web template

JavaScript code in the Timesheet web template

JavaScript code in the Timesheet Costs JavaScript section

A custom modal window for External Data API

Agile user story 2 – a custom modal window for External Data API

Implementing a custom modal window for External Data API

Summary

15

Enhancing Development with ChatGPT

An overview of ChatGPT and Microsoft Copilot

ChatGPT

Copilot

The benefits of using AI tools in web development

Efficiency and speed

Enhanced learning

Improved code quality

Reduced cognitive load

Real-time collaboration

Getting started with ChatGPT

Setting up ChatGPT

Constructing effective prompts

Best practices for prompts

Example – generating a Liquid web template

Debugging and testing with AI Assistance

Using ChatGPT for debugging advice

Example – debugging a JavaScript function

Refining code with AI’s suggestions

Best practices for using AI in debugging and testing

Maintaining the documentation of prompts and tasks

Refine and reuse prompts

Facilitate collaboration

Debugging and troubleshooting

Continuous improvement

Best practices for maintaining prompt history

Include context and comments

Practical tips and best practices

Iterative development with AI tools

Handling limitations and leveraging strengths

Ensuring code quality and maintainability

Copilot in Power Pages Studio

An agile user story to develop a customer support system

Implementation using Copilot

Copilot and ChatGPT together

An example scenario – creating a subscription system for a SaaS app

Design and steps for the purchase subscription process

Summary

Index

Other Books You May Enjoy

1

Modernizing Rob the Builder’s Business with Power Pages

In this book, we will follow the journey of transforming Rob the Builder’s business with Microsoft Power Pages. Through this, you will become acquainted with the key players who shape this narrative:

Rob, the determined owner of Rob the Builder, an experienced builder and engineer, overseeing a thriving construction companyBrenda, Rob’s business partner and the company’s backboneSarah, Brenda’s tech-savvy niece, a recent graduate with a budding passion for technology, especially the Power Platform

Together, they seek to modernize the construction business and bridge technology gaps. This chapter will cover the paradigm shift brought by Power Pages to setting up the tenancy and guiding Sarah through the installation process.

We’ll cover the following topics in this chapter:

Empowering Rob the Builder’s transformationPower Pages – a paradigm shiftSetting the stage – tenancy and Power PagesNavigating the developer’s landscape

Empowering Rob the Builder’s transformation

In a quiet corner of the bustling city, Rob was at the helm of Rob the Builder, a modest yet thriving building construction company. With a dedicated team that included his wife Brenda and several family members, they had successfully completed numerous projects. However, behind their success stories lurked an undercurrent of inefficiency and missed opportunities. The tale of Rob the Builder is not just about bricks and mortar; it’s a narrative of evolution, innovation, and the power of technology to reshape a business’s trajectory.

Brenda’s revelation

Behind the scenes, Brenda tirelessly managed the company’s back-office operations using a patchwork of tools – Excel, Word, and dated accounting software. Invoices, remittance advice, and other documents were created using Word templates that had served them for years. While the business thrived, Brenda knew they needed to shed their outdated processes to stay relevant in a rapidly changing world.

Lost opportunities and health and safety compliance

The turning point came when Rob realized they had missed out on lucrative project opportunities due to their outdated systems. Large clients demanded stringent health and safety reporting, an area where Rob the Builder struggled. As a result, they lost credibility and potential contracts. Something had to change, and Brenda’s recent discovery was their beacon of hope.

Brenda’s niece, Sarah, enters the scene

Enter Sarah, Brenda’s niece and a recent graduate. Armed with a smattering of HTML and JavaScript knowledge from her college web development course, Sarah had caught wind of the Power Platform during Microsoft exhibitions. Though she lacked extensive software development skills, Sarah was convinced that the Power Platform’s no-code/low-code approach could be the catalyst for Rob the Builder’s transformation.

Power Pages – a vision unveiled

After heartfelt discussions between Rob, Brenda, and Sarah, the decision was made to bring Sarah aboard. Brenda, motivated by a desire to modernize the business, would work side by side with Sarah to build a business system centered on the Power Pages site. Their first target is an incident management (IM) system. However, the scope extended beyond that – encompassing customer relationship management (CRM), invoicing, estimating, and even a virtual assistant to revolutionize customer interactions.

Power Pages – a paradigm shift

In the ever-evolving landscape of business and technology, adaptability is not just an advantage; it’s a necessity. For Rob the Builder, a construction company grappling with outdated processes and missed opportunities, this realization opened the door to a transformative journey, empowering the business to bridge the gap between technology and its unique operational needs.

Use case – establishing and utilizing a comprehensive information system with Power Pages

Sarah starts with a use case to formalize the plan:

Scope: Rob the Builder – construction company digital transformationPrimary actor: SarahStakeholders and interests:Rob: Aims to modernize the company’s technology infrastructure to enhance operational efficiency and customer service (and consequently, profitability)Brenda: Looks to simplify back-office operations, improving data management and customer communicationsClients: Expect a reliable and transparent digital interface for interacting with the company and monitoring project progressPreconditions:The company does not currently have an established Microsoft Power Platform environmentSarah has basic knowledge of HTML and JavaScript and is familiar with the Power Platform’s capabilitiesMain success scenario:Setting up the tenancy:Sarah registers for a Microsoft 365 subscription to provide the underlying infrastructure needed for the Power PlatformShe sets up a new tenant in Microsoft 365, which includes configuring basic settings and integrating domain informationSarah ensures that the appropriate Power Platform capabilities are enabled and that she and other key personnel have the necessary licensesCreating a Power Platform environment:In the Power Platform admin center, Sarah creates a new environment specifically for Rob the Builder’s operations, choosing the correct region and ensuring it includes a database for DataverseDeveloping a comprehensive information system:Sarah uses Power Pages to design and develop a multi-functional website that includes the following:IM system: To log and monitor workplace incidentsCRM: For managing all customer interactions and feedbackProject tracking module: To provide real-time updates on construction projects to both staff and clientsThe website integrates seamlessly with Dataverse for robust data management and securityTesting and implementing the system:After developing the system, Sarah sets up a pilot phase involving selected stakeholders to test the functionalities and gather feedbackNecessary adjustments are made based on the feedback to optimize usability and functionalityGoing live and monitoring:The comprehensive information system is officially launchedSarah monitors the system’s performance and usage, making adjustments as needed to improve operations and customer satisfactionUse-case extensions:If Sarah encounters issues with licensing or setup, she consults Microsoft support for guidanceIf additional modules are required, such as supply chain tracking, these are developed and integrated during the pilot phase or subsequent updatesFrequency of use:Daily by staff for managing operations and customer interactionsContinuously by clients for accessing project information and communication toolsSpecial requirements:The system must be intuitive and accessible on various devices, including mobiles, to support on-site and remote useCompliance with the General Data Protection Regulation (GDPR) and other relevant data protection regulations is essentialTechnology and data variations list:The system is developed and managed using Power Pages and Dataverse within the established Power Platform environmentPotential integration of Power Automate to automate workflows and data synchronization between modules

This refined use case outlines a detailed pathway from initial setup to the deployment and operation of a comprehensive information system using Microsoft Power Pages, making it a practical blueprint for implementation.

Understanding Power Pages’ role

At its core, Power Pages is a game-changer, offering a gateway to enhanced customer engagement and streamlined processes. Imagine a digital interface that seamlessly integrates with your existing systems, creating an environment where interactions are not just transactions but meaningful engagements. Power Pages is where the organization’s digital presence takes center stage – from customer-facing applications to internal workflows.

Power Platform’s no-code/low-code magic

Traditional software development often feels like an arcane art accessible only to a select few. Enter the Power Platform, a revolutionary approach that empowers individuals such as Sarah – with some HTML and JavaScript know-how – to create sophisticated applications without delving deep into code. Power Pages, a component of the Power Platform, embraces the concept of no-code/low-code development. This means Sarah can build functional and powerful applications with minimal coding, relying on intuitive drag-and-drop interfaces, pre-built templates, and configurable elements.

Bridging technology gaps with Power Pages

In the context of Rob the Builder, Power Pages becomes the bridge between a world of manual processes and the digital future. As Sarah embarks on developing solutions for IM, CRM, and more, Power Pages offers a conduit to fuse technology with the business’s unique requirements. With Power Pages, the gap between aspirations and reality narrows significantly.

As Sarah navigates the landscape of tenancy setup, developer installations, and development best practices, Power Pages will emerge as her ally in modernizing every aspect of the business. In the next section, we will learn how to set up her tenancy.

Setting the stage – tenancy and Power Pages

In the journey to transform Rob the Builder from a realm of manual processes to a digitized operation, one of the crucial initial steps is laying the foundation through the concept of tenancy. This section will demystify the notion of tenancy and guide Sarah through the process of establishing a tenancy for Rob the Builder within the Power Pages environment.

Laying the foundation – what is a tenancy?

Before delving into the technical aspects, it’s essential to grasp the concept of tenancy within the context of Power Pages. A tenancy serves as a dedicated workspace or environment within the Power Pages platform. It’s here that you can craft, customize, and deploy applications tailored to specific needs. Each tenancy operates in isolation, ensuring data separation, security, and individualized experiences for users.

Tip

For further reading, follow the link to Microsoft Learn: https://learn.microsoft.com/en-us/training/modules/administrating-power-platform-subscriptions/

Establishing a tenancy for Rob the Builder

Sarah’s first task is to create a tenancy for Rob the Builder, effectively carving out a unique realm where the company’s digital transformation will unfold. The process is straightforward. Creating a new tenant for the Microsoft Power Platform, specifically for using Dataverse and Power Pages, involves a few key steps. Let’s look at a detailed guide Sarah followed.

Step 1 – Registering for Microsoft 365 and setting up a new tenant

When purchasing Microsoft 365, a tenant for the organization is automatically created. A tenant represents an instance of Azure AD services, and it’s where the organization’s data is stored. Firstly, Sarah needs to have a Microsoft 365 subscription as it provides the underlying infrastructure for the Power Platform. Here are the steps she follows:

Sarah goes to the Microsoft 365 admin center (admin.microsoft.com).Sarah chooses a plan that suits her development needs and follows the instructions to purchase and set up the subscription.She logs in to the Microsoft 365 admin center.Then, she completes any additional setup, such as adding a domain and configuring basic settings, as shown in Figure 1.1.She enables Users and Assign Licenses.To use Power Platform services, Sarah will set herself the appropriate licenses.Then, she navigates to Users | Active users in the Microsoft 365 admin center.Lastly, she adds users and assigns licenses that include Power Platform capabilities.

After following these steps, Sarah now has access to the Power Platform admin center, a hub that enables administrators to manage environments, including tenancies (https://admin.powerplatform.microsoft.com/):

Figure 1.1 – Accessing the Power Platform admin center to begin the process of establishing a tenancy

Step 2 – Creating new environments

Power Platform environments are containers that house, manage, and share your business data, apps, and flows.

Firstly, to create a new environment within the Power Platform admin center, Sarah clicks on Environments and then + New. She chooses a region closest to her users to ensure data can be transferred quickly.

Sarah will create two environments:

A sandbox environment, which will later be converted to a production environment, acting as the live environment for customers.A development environment, allowing for tests to be made without impacting the end client. These environments are dictated by the Type setting (as seen in Figure 1.2).

Further, as she would like a database assigned to her Power Pages website, Sarah enables Add a Dataverse data store?. This will come in handy for future customer management:

Figure 1.2 – Creating a dedicated environment with the Power Platform admin center

Configuring environment settings

Sarah can configure various settings for the environment, including data retention policies, security measures, and user access controls. Inside the newly created environment, she explores settings to configure security roles, data policies, and any integrations.

Step 3 – Power Pages setup

With the tenancy in place, it’s time to venture into the Power Pages setup, where the magic truly happens. To create her first site in the new environment, Sarah will open Power Pages administration, located at https://make.powerpages.microsoft.com/.

Note that this is a different URL from the Power Platform admin center. Hereby, Sarah can create and manage websites. With templates to help her start websites with themes and sample pages, Sarah will browse through the templates and select one of them as her starter site. Microsoft provides a 30-day free trial for sites created, which means Sarah can try out different templates. Sarah chooses a starter layout to create an initial website to learn and start her development. Sarah enters the site name and address and creates the new site:

Figure 1.3 – Power Pages administration edit to open the studio

Step 4 – Power Pages studio

Once the new website is created, there is an Edit website link (see Figure 1.3) that opens the Power Pages studio. In later chapters, you will see how Sarah uses this to manage and edit the website.

Navigating the developer’s landscape

In this section, Sarah will explore the Power Platform. She’ll also look at the tools for Power Pages development, and configure the environment for seamless collaboration.

Exploring the Power Platform

Sarah should navigate the Power Platform, where she’ll find Power Pages, Power Automate, and Power BI, forming a trifecta of no-code/low-code magic.

Browse to https://make.powerapps.com/, and you’ll see the following menu on the left-hand side of your welcome screen:

Figure 1.4 – Sarah’s journey as a developer involves exploring the capabilities of the Power Platform

Clicking on Apps will show all the apps installed, as shown in Figure 1.5, with Power Pages Management being the critical tool that allows her to manage her forms and their behavior, with a rich set of codeless functionality available through the management tool:

Figure 1.5 – Apps view in the Power Platform

By clicking on the Tables tab shown in Figure 1.5, Sarah can access Dataverse to allow quick access to table data, which will help her in testing her pages during development, and also to create ad hoc views while working with and viewing reference data such as often-used record types on every web page that she will work on in her projects. With the Solutions tab shown in Figure 1.5, Sarah will learn that though solutions are also conveniently placed in her primary tool, the Power Pages studio, there are certain features of working with solutions that are only found here.

Before Sarah dives into the creative process, she needs to get familiar with the right tools at her disposal.

Tools for Power Pages development

We will list the tools that Sarah will utilize for her development, and in the next chapter, we will learn how to use these tools. Accessing these tools sets the stage for her digital craftsmanship.

Power Pages studio

The Power Pages studio is the cornerstone tool for Sarah’s web development endeavors. To access the Power Pages studio and its suite of features, Sarah navigates to https://make.powerpages.microsoft.com/. This platform serves as her central hub for managing websites and initiating the creation of new ones, as demonstrated earlier in this chapter. Beyond website management, the Power Pages studio offers access to essential tools such as Microsoft Visual Studio Code, Power Automate for cloud flow automation, and data for Dataverse data. Within this unified environment, Sarah can seamlessly interact with Dataverse components such as tables, views, and Dataverse forms, streamlining her development workflow and enhancing productivity.

Website deployment with solutions

Sarah will learn to use solutions to deploy her websites and their components between environments from her development environment to her production environment. Solutions are accessible via the Solutions tab in Power Pages home, as shown in Figure 1.6:

Figure 1.6 – Solutions on the Power Pages studio

Power Pages Management

Power Pages Management serves as the central hub for Sarah to oversee, organize, and maintain her Power Pages projects efficiently. It provides a comprehensive suite of tools and features tailored to streamline the management of websites created using Power Pages. Power Pages Management is accessed from the Power Pages studio, as shown in Figure 1.7:

Figure 1.7 – Accessing Power Pages Management

Here are those tools and features:

Project organization: Power Pages Management offers robust capabilities for organizing and structuring Sarah’s Power Pages projects. She can create, view, and manage multiple projects, making it easy to stay organized and keep track of her development efforts.Site configuration: Within Power Pages Management, Sarah can configure various aspects of her websites, including site settings, navigation menus, and user permissions.Content management: Managing content is made simple with Power Pages Management. Sarah can create and edit web pages, templates, and content snippets directly within the platform’s intuitive interface. This is where Power Pages forms, lists pages, and buttons are configured. Sarah can open Power Pages Management from the Power Pages studio. Once it is open, she can browse to the Content Snippets tab under the Content section, as shown in Figure 1.8:

Figure 1.8 – Content Snippets on Power Pages Management

The Power Pages studio and Power Pages Management form the two most important tools that Sarah will use to do most of her work. Sarah will learn to efficiently work to keep both these open.

Microsoft Visual Studio Code

Microsoft Visual Studio Code serves as Sarah’s primary workspace for various coding, customization, and integration tasks related to web development. Within this IDE, Sarah gains access to all the essential components necessary for building and managing her web pages effectively. Here’s how Visual Studio Code enhances Sarah’s workflow:

Coding environment: Visual Studio Code provides a feature-rich coding environment where Sarah can write, edit, and debug code seamlessly. Whether it’s HTML, Liquid, JavaScript, or CSS, Sarah can access and manipulate her code base with ease.Customization capabilities: With Visual Studio Code, Sarah has the flexibility to customize her coding environment according to her preferences and requirements. She can install extensions, themes, and plugins to tailor the editor to her specific needs, enhancing productivity and comfort during long coding sessions.Integration with other tools: Visual Studio Code seamlessly integrates with a wide range of tools and services, allowing Sarah to streamline her development workflow. Whether it’s version control systems (VCSs) such as Git, task runners, or build automation tools, Visual Studio Code provides robust integration options, enabling Sarah to work efficiently within her preferred ecosystem.AI-powered assistance with Copilot: Visual Studio Code’s integration with Copilot, an AI-powered coding assistant, further enhances Sarah’s capabilities. Copilot leverages machine learning (ML) algorithms to provide code suggestions, autocomplete, and even generate code snippets based on context, making it particularly valuable for novice developers or when Sarah encounters complex coding scenarios.Access code from the Power Pages studio: The code for the website is accessed via the Power Pages studio. You can click on the Edit code button as shown in Figure 1.9:

Figure 1.9 – Accessing website code

Power Apps CLI

The Power Apps Command-Line Interface (CLI) provides a CLI for managing various components, solutions, and resources related to Power Pages development. Here’s how Sarah utilizes the Power Apps CLI, especially in conjunction with Visual Studio Code, within her Power Pages projects:

Installation as an extension to Visual Studio Code: Sarah seamlessly integrates the Power Apps CLI into her development environment by installing it as an extension to Visual Studio Code. This integration enhances her workflow by allowing her to access Power Apps CLI commands directly.Deployment between tenancies: An alternative to solutions deployment from the Power Pages solution is to use the CLI for deploying websites between different environments and different tenancies and also to migrate and convert website formats.Automation and scripting: Sarah can leverage the Power Apps CLI’s scripting capabilities to automate repetitive tasks and streamline her development workflow. By writing scripts that utilize Power Apps CLI commands, she can automate tasks such as building, testing, and deploying Power Pages projects, saving time and reducing the risk of errors.

Tip

Further reading at Microsoft Learn: https://learn.microsoft.com/en-us/power-pages/configure/power-platform-cli-tutorial

Configuring the environment for seamless collaboration

To ensure a cohesive and collaborative development experience, Sarah needs to configure her environment effectively. Seamless Integration with Microsoft Power Platform Power Pages offers seamless integration with Dataverse, Power Automate, and the broader Power Platform, eliminating the need for any API work. This means you can effortlessly connect and utilize these Microsoft products directly within Power Pages, ensuring a streamlined and efficient development process. By leveraging built-in connectors and pre-configured integration points, you can focus on building your web apps without worrying about the technical complexities of integrating various services, thus enhancing productivity and reducing development time.

Version control integration

Sarah can integrate her development environment with VCSs such as GitHub. This enables efficient collaboration, change tracking, and project stability. Sarah can set up a GitHub repository dedicated to her project, providing a centralized location for storing and managing code. Project cloning within Visual Studio Code will allow her to work on the project locally and facilitate seamless collaboration with team members. Version control within Visual Studio Code enables tracking changes and revisions effectively. With GitHub, Sarah can regularly stage updates and commit modifications in Visual Studio Code for traceability, sharing updates by pushing changes to GitHub when ready. She also keeps her local copy synchronized by pulling updates from GitHub as needed. In case of conflicting changes, Visual Studio Code’s built-in tools help Sarah resolve merge conflicts efficiently. Furthermore, she utilizes Visual Studio Code’s capabilities to create and merge feature branches, allowing for organized development and streamlined integration of new features intothe project.

Managing environments

Within the Power Platform admin center, Sarah can manage environments to create sandboxes for development and testing, promoting stability. This is where Sarah manages her environment storage and manual backups.

Security and access controls

Sarah configures access controls and security measures to ensure that development efforts align with Rob the Builder’s security policies.

As Sarah embraces her role as a developer, she’s equipped with the tools, knowledge, and collaborative environment needed to turn her creative visions into powerful digital solutions. The journey has only just begun, and as Sarah crafts the digital landscape for Rob the Builder, her expertise and the capabilities of Power Pages will join forces to drive a revolution in the company’s operations. Sarah’s journey continues as she delves into the realm of Power Pages design, leveraging the no-code/low-code prowess of Power Pages to shape the future of Rob the Builder.

Summary

The journey of Rob the Builder’s transformation is one of inspiration and innovation. Sarah, armed with Power Pages and guided by Brenda’s passion for modernization, embarks on a mission to revamp the company’s back-office systems. The upcoming chapters will delve into the intricacies of Power Pages, from setup to development, illustrating how technology can be harnessed to reshape a business’s destiny. With tools in hand and a clear vision, Rob the Builder’s story demonstrates the potential of embracing change to drive growth, efficiency, and a brighter future.

The upcoming chapters will delve deeper into how Power Pages becomes the foundation for Rob the Builder’s metamorphosis.

In the next chapter, we will look at setting up and examining the tools that Sarah needs to complete the website and app development.

2

Power Pages Design Studio

In the last chapter, we tackled the business challenges faced by Rob the Builder, highlighting the company’s outdated website and systems that hindered business operations and project bids. Embarking on a transformative journey, Sarah and Brenda began exploring Power Pages, installing essential tools, and laying the groundwork for a digital overhaul of their business.

In this chapter, we will explore the exciting journey of Sarah and Brenda as they dive into the world of the Power Pages design studio to transform the digital presence of Rob the Builder.

In this chapter, we will cover the following topics:

Planning the website structureCreating static pagesFinal touches and preparing for launch

Sarah was brimming with excitement for her meeting with Brenda. They planned to dive deep into developing new website content. This update was much needed, replacing their decades-old site. The original site was built years ago. It was basic, featuring a Home page, an About Us section, and listings of clients and projects. Brenda hadn’t reviewed the site in years. Revisiting it with Sarah was both embarrassing and a relief. Sarah assured Brenda that the new site would be easy to update and maintain. She also promised to teach Brenda how to do it. This was a source of amazement and comfort for Brenda.

Planning the website structure

Moving forward from their reflections on the old site, Sarah and Brenda then shifted their focus to planning the structure of the new website. They sat down with the Power Pages design studio open in front of them, ready to turn their vision into reality. The first task at hand was reviewing the various templates provided by Power Pages, selecting one that best represented the essence of Rob the Builder. They knew their new site needed to be not only visually appealing but also functional and easy to navigate. As they browsed through the options, they discussed the key sections the website would feature:

An Home pageAn About Us pageA Contact Us pageA client listing consisting of an image and text for each listing

Sarah decided to write an Agile user story to capture the essence of their website development work and ensure clear communication with the team and stakeholders.

User story – crafting a modern website for Rob the Builder

As a construction company aiming to enhance our digital presence and showcase our services effectively, we need a modern and user-friendly website. This website should reflect our brand identity, provide clear navigation, and engage visitors with compelling content and imagery so that we attract potential clients, communicate our expertise, and facilitate seamless interactions with our audience.

Acceptance criteria

Here are the acceptance criteria for building the website:

The website should have a visually appealing design that aligns with our branding guidelinesIt should feature key sections such as Home, About Us, Services, and Contact Us