https://github.com/spwareing/imagesliderpcf
PCF Component for Canvas App
https://github.com/spwareing/imagesliderpcf
powerplatform react typescript typescript-react
Last synced: 2 months ago
JSON representation
PCF Component for Canvas App
- Host: GitHub
- URL: https://github.com/spwareing/imagesliderpcf
- Owner: SPWareing
- License: mit
- Created: 2023-10-29T17:31:03.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-02-05T07:35:59.000Z (5 months ago)
- Last Synced: 2025-03-25T22:21:39.901Z (3 months ago)
- Topics: powerplatform, react, typescript, typescript-react
- Language: TypeScript
- Homepage:
- Size: 422 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# My PCF Component
The ImageSliderPCF is a custom Power Apps component framework (PCF) virtual control built with TypeScript and React.
The control provides a smoother transitioning image gallery, then the OOB galleries within power apps.
----
The PCF is based around the ImageSlider tutorial from [WebDevSimplified](https://www.youtube.com/watch?v=Kx8XlKRBZx8&ab_channel=WebDevSimplified). The code for Kyle's repo is [here](https://github.com/WebDevSimplified/react-image-slider).
To keep in line with current Microsoft theming, I've replaced all the Lucide icons with FluentUI FontIcons
```
import { Icon } from '@fluentui/react/lib/Icon'
import { mergeStyles, mergeStyleSets } from '@fluentui/react/lib/Styling';
```
## Configuration
### Properties
- ImageSliderProps accepts 3 elements
1. ImageSlider[]
2. Width
3. IconColour (this defaults to rgba(25,255,255)
- The ImageSliderItem is also comprised of 3 elements
1. id; generated from the recordId
2. imageUrl (required), a url to the image
3. name (optional)
ImageUrl and ImageName will need to have a column assigned in the Canvas app.
## Installation
Clones the repo
```
git clone https://github.com/SPWareing/ImageSliderPCF.git
cd ImageSliderPCF
```
Push the PCF to your required environment
```
pac pcf push -pp samples
```
NB A Publisher Prefix of samples is suggested for testing components. The PCF can be packaged as a solution when testing has been satisified
----
### Add the component to a Canvas App
Upon adding to a canvas the control will default to the following image
Without a default image the control errors and does not mount. Once The PCF has mounted, the image(s) can be changed to a collection/datasource and should render similar to the below.
----
 