Git Product home page Git Product logo

iconoptionset.pcf's Introduction

IconOptionSet.PCF GitHub all releases

IconOptionset PCF (PowerApps Component framework) Control that turns a PowerApps optionset field into a configurable FluentUI Choice group with Icons. Compatible with up to five options. Optionset labels are used as icon labels.

Dependencies

fluentui/react : https://github.com/microsoft/fluentui

Parameters

Parameter Description Default
Primary Optionset Select Optionset (5 values max)
Icon #1 Name of icon #1, see Available icons link. EmojiDisappointed
Icon #2 Name of icon #2, see Available icons link. Sad
Icon #3 Name of icon #3, see Available icons link. EmojiNeutral
Icon #4 Name of icon #4, see Available icons link. Emoji2
Icon #5 Name of icon #5, see Available icons link. Emoji
Selected icon color Color of selected icon.Supports literal (ex. blue, red) and RGBA color codes (ex. #da9494) #005A9E

Screenshots

alt text alt text

Installation

You can install the component directly from solution files containes in the 'Release' section https://github.com/drivardxrm/IconOptionSet.PCF/releases

Get required tools

To use Microsoft PowerApps CLI, do the following:

  • Install Npm (comes with Node.js) or install Node.js (comes with npm). We recommend LTS (Long Term Support) version 10.15.3 LTS as it seems to be most stable.

  • Install .NET Framework 4.6.2 Developer Pack.

  • If you don’t already have Visual Studio 2017 or later, follow one of the options below:

    • Option 1: Install Visual Studio 2017 or later.
    • Option 2: Install .NET Core 2.2 SDK and then install Visual Studio Code.
  • Install Microsoft PowerApps CLI.

Be sure to update your Microsoft PowerApps CLI to the latest version:

pac install latest

Build the control

  • Clone the repo/ download the zip file.
  • Navigate to ./IconTwoOption/ folder.
  • Copy the folder path and open it in visual studio code.
  • Open the terminal, and run the command the following command to install the project dependencies:
npm install

Then run the command:

npm run start

Build the solution

  • Create a new solution folder and open the Developer command prompt.
  • Change the directory to the newly created folder in previous step.
  • Init the future solution:
pac solution init --publisherName someName --customizationPrefix someSolutionPrefix
  • Add the control to your future solution:
pac solution add-reference --path provide path of control project folder where the pcf.proj is available
  • Build 1/2:
msbuild /t:restore
  • Build 2/2:
msbuild
  • You will have the solution file in SolutionFolder/bin/debug folder!

If you want to change the solution type you have to edit the .cdsproj file:

Solution Packager overrides, un-comment to use: SolutionPackagerType (Managed, Unmanaged, Both)
  <PropertyGroup>
    <SolutionPackageType>Managed</SolutionPackageType>
  </PropertyGroup>

iconoptionset.pcf's People

Contributors

dependabot[bot] avatar drivardxrm avatar snyk-bot avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar

Forkers

wauters qfni123

iconoptionset.pcf's Issues

Cancel button doesn't work.

Cancel would sometimes work, sometimes doesn't on existing records. It never works when creating new records.

Styling when control is readonly (disabled)

I had a comment from a user saying that the styling of the control when in readonly (disabled) mode is not intuitive.

1- The colors should be less faded
2- The selected item should stand out more.

here is the current look and feel

image

Here's what I came up with for the next release
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    πŸ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. πŸ“ŠπŸ“ˆπŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❀️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.