Added ContentPicker Validation For Required Fields

[Sandeep905]

Fixes #17462

I tried to fix the above-linked Issue. @Piedone I am not sure if this approach is acceptable or not. If not let me know how I can fix the issue. This will be the first-ever open-source contribution from my end.

[github-actions]

Thank you for submitting your first pull request, awesome! 🚀 If you haven't already, please take a moment to review our contribution guide. This guide provides helpful information to ensure your contribution aligns with our standards. A core team member will review your pull request.

[hishamco]

Regarding the style don't change this file instead change the one in the Styles folder

OrchardCore/src/OrchardCore.Modules/OrchardCore.Resources/ResourceManagementOptionsConfiguration.cs

Lines 493 to 498 in 3de1e7f

	manifest
	.DefineStyle("vue-multiselect")
	.SetUrl("~/OrchardCore.Resources/Styles/vue-multiselect.min.css", "~/OrchardCore.Resources/Styles/vue-multiselect.min.css")
	.SetCdn("https://cdn.jsdelivr.net/npm/vue-multiselect@2.1.6/dist/vue-multiselect.min.css", "https://cdn.jsdelivr.net/npm/vue-multiselect@2.1.6/dist/vue-multiselect.min.css")
	.SetCdnIntegrity("sha384-PPH/T7V86Z1+B4eMPef4FJXLD5fsTpObWoCoK3CiNtSX7aji+5qxpOCn1f2TDYAM", "sha384-PPH/T7V86Z1+B4eMPef4FJXLD5fsTpObWoCoK3CiNtSX7aji+5qxpOCn1f2TDYAM")
	.SetVersion("2.1.6");

[Piedone]

Thank you!

Yep, what Hisham says. See https://docs.orchardcore.net/en/latest/guides/gulp-pipeline/. That's why https://github.com/OrchardCMS/OrchardCore/actions/runs/13251045412?pr=17470 fails.

When addressing review feedback, please adhere to the following:

• Please update your pull request according to feedback until it is approved by one of the core team members.
• Apply suggested changes directly so the reviewer doesn't have to eyeball the changes. These resolve themselves after applying them, and that's fine.
• Don't resolve other conversations so it's easier to track for the reviewer. Then, the reviewer will resolve them.
• Feel free to mark conversations that you addressed to keep track of them with an emoji or otherwise, just don't resolve them.
• Please keep conversations happening in line comments in those convos, otherwise, communication will be a mess. If you have trouble finding them, see this video.
• When you're done addressing all feedback of a review, click "Re-request review" in the top-right corner for each reviewer when you're ready for another round of review, so they know that you're done.

[Sandeep905]

Regarding the style don't change this file instead change the one in the Styles folder

OrchardCore/src/OrchardCore.Modules/OrchardCore.Resources/ResourceManagementOptionsConfiguration.cs

Lines 493 to 498 in 3de1e7f

	manifest
	.DefineStyle("vue-multiselect")
	.SetUrl("~/OrchardCore.Resources/Styles/vue-multiselect.min.css", "~/OrchardCore.Resources/Styles/vue-multiselect.min.css")
	.SetCdn("https://cdn.jsdelivr.net/npm/vue-multiselect@2.1.6/dist/vue-multiselect.min.css", "https://cdn.jsdelivr.net/npm/vue-multiselect@2.1.6/dist/vue-multiselect.min.css")
	.SetCdnIntegrity("sha384-PPH/T7V86Z1+B4eMPef4FJXLD5fsTpObWoCoK3CiNtSX7aji+5qxpOCn1f2TDYAM", "sha384-PPH/T7V86Z1+B4eMPef4FJXLD5fsTpObWoCoK3CiNtSX7aji+5qxpOCn1f2TDYAM")
	.SetVersion("2.1.6");

Unable to find the Style folder in OrchardCore.Resources -> Style

vue-multiselect.min.css is only located in

Let me know what am I missing @hishamco ?

[hishamco]

It seems it's a bug that I need to fix after I check the input for the assets coming from node_modules/vue-multiselect/dist/vue-multiselect.min.css, so I suggest creatingvue-multiselect-override.css, so we don't need to touch the distributed file. I remembered I did something similar in the past

Your thoughts @Piedone?

[hishamco]

No bug here, the asset file will output the styles & scripts in the wwwroot

[Piedone]

You'll either need to add a new SCSS file to OrchardCore.ContentFields/Assets /scss and include it (like the others are), or better yet, check where the red border comes from for the other fields and add that class in the code.

[hishamco]

@Sandeep905 could you please share the style that has been added for this PR, looking into a minified version is hard, then we can check how we can go

[Sandeep905]

.Content-Picker-Required .multiselect__tags{
border:1px solid red! important;
background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
background-repeat:no-repeat;
background-position:right calc(0.375em + 0.1875rem) center;
background-size:calc(0.75em + 0.375rem) calc(0.75em + 0.375rem)
}
.Content-Picker-Required .multiselect__select{
padding-right:calc(1.5em + 0.95rem)
}

@hishamco here it is.

[hishamco]

So let us create a style file for it like what @Piedone suggested

[Sandeep905]

So let us create a style file for it like what @Piedone suggested

are you on it @hishamco ?

[hishamco]

I didn't understand what you mean

[Sandeep905]

I didn't understand what you mean

Are you creating the style file as suggested for the custom CSS I shared?

[hishamco]

I mean create a SCSS file with your changes

[Sandeep905]

@Sandeep905 please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.

@dotnet-policy-service agree [company="{your company}"]

Options:

• (default - no company specified) I have sole ownership of intellectual property rights to my Submissions and I am not making Submissions in the course of work for my employer.

@dotnet-policy-service agree

• (when company given) I am making Submissions in the course of work for my employer (or my employer has intellectual property rights in my Submissions by contract or applicable law). I have permission from my employer to make Submissions and enter into this Agreement on behalf of my employer. By signing below, the defined term “You” includes me and my employer.

@dotnet-policy-service agree company="Microsoft"

Contributor License Agreement

Contribution License Agreement

This Contribution License Agreement ( “Agreement” ) is agreed to by the party signing below ( “You” ), and conveys certain license rights to the .NET Foundation ( “.NET Foundation” ) for Your contributions to .NET Foundation open source projects. This Agreement is effective as of the latest signature date below.

1. Definitions.

“Code” means the computer software code, whether in human-readable or machine-executable form, that is delivered by You to .NET Foundation under this Agreement.

“Project” means any of the projects owned or managed by .NET Foundation and offered under a license approved by the Open Source Initiative (www.opensource.org).

“Submit” is the act of uploading, submitting, transmitting, or distributing code or other content to any Project, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Project for the purpose of discussing and improving that Project, but excluding communication that is conspicuously marked or otherwise designated in writing by You as “Not a Submission.”

“Submission” means the Code and any other copyrightable material Submitted by You, including any associated comments and documentation.

2. Your Submission. You must agree to the terms of this Agreement before making a Submission to any Project. This Agreement covers any and all Submissions that You, now or in the future (except as described in Section 4 below), Submit to any Project.

3. Originality of Work. You represent that each of Your Submissions is entirely Your original work. Should You wish to Submit materials that are not Your original work, You may Submit them separately to the Project if You (a) retain all copyright and license information that was in the materials as you received them, (b) in the description accompanying your Submission, include the phrase "Submission containing materials of a third party:" followed by the names of the third party and any licenses or other restrictions of which You are aware, and (c) follow any other instructions in the Project's written guidelines concerning Submissions.

4. Your Employer. References to “employer” in this Agreement include Your employer or anyone else for whom You are acting in making Your Submission, e.g. as a contractor, vendor, or agent. If Your Submission is made in the course of Your work for an employer or Your employer has intellectual property rights in Your Submission by contract or applicable law, You must secure permission from Your employer to make the Submission before signing this Agreement. In that case, the term “You” in this Agreement will refer to You and the employer collectively. If You change employers in the future and desire to Submit additional Submissions for the new employer, then You agree to sign a new Agreement and secure permission from the new employer before Submitting those Submissions.

5. Licenses.

a. Copyright License. You grant .NET Foundation, and those who receive the Submission directly or indirectly from .NET Foundation, a perpetual, worldwide, non-exclusive, royalty-free, irrevocable license in the Submission to reproduce, prepare derivative works of, publicly display, publicly perform, and distribute the Submission and such derivative works, and to sublicense any or all of the foregoing rights to third parties.

b. Patent License. You grant .NET Foundation, and those who receive the Submission directly or indirectly from .NET Foundation, a perpetual, worldwide, non-exclusive, royalty-free, irrevocable license under Your patent claims that are necessarily infringed by the Submission or the combination of the Submission with the Project to which it was Submitted to make, have made, use, offer to sell, sell and import or otherwise dispose of the Submission alone or with the Project.

c. Other Rights Reserved. Each party reserves all rights not expressly granted in this Agreement. No additional licenses or rights whatsoever (including, without limitation, any implied licenses) are granted by implication, exhaustion, estoppel or otherwise.

6. Representations and Warranties. You represent that You are legally entitled to grant the above licenses. You represent that each of Your Submissions is entirely Your original work (except as You may have disclosed under Section 3 ). You represent that You have secured permission from Your employer to make the Submission in cases where Your Submission is made in the course of Your work for Your employer or Your employer has intellectual property rights in Your Submission by contract or applicable law. If You are signing this Agreement on behalf of Your employer, You represent and warrant that You have the necessary authority to bind the listed employer to the obligations contained in this Agreement. You are not expected to provide support for Your Submission, unless You choose to do so. UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING, AND EXCEPT FOR THE WARRANTIES EXPRESSLY STATED IN SECTIONS 3, 4, AND 6 , THE SUBMISSION PROVIDED UNDER THIS AGREEMENT IS PROVIDED WITHOUT WARRANTY OF ANY KIND, INCLUDING, BUT NOT LIMITED TO, ANY WARRANTY OF NONINFRINGEMENT, MERCHANTABILITY, OR FITNESS FOR A PARTICULAR PURPOSE.

7. Notice to .NET Foundation. You agree to notify .NET Foundation in writing of any facts or circumstances of which You later become aware that would make Your representations in this Agreement inaccurate in any respect.

8. Information about Submissions. You agree that contributions to Projects and information about contributions may be maintained indefinitely and disclosed publicly, including Your name and other information that You submit with Your Submission.

9. Governing Law/Jurisdiction. This Agreement is governed by the laws of the State of Washington, and the parties consent to exclusive jurisdiction and venue in the federal courts sitting in King County, Washington, unless no federal subject matter jurisdiction exists, in which case the parties consent to exclusive jurisdiction and venue in the Superior Court of King County, Washington. The parties waive all defenses of lack of personal jurisdiction and forum non-conveniens.

10. Entire Agreement/Assignment. This Agreement is the entire agreement between the parties, and supersedes any and all prior agreements, understandings or communications, written or oral, between the parties relating to the subject matter hereof. This Agreement may be assigned by .NET Foundation.

.NET Foundation dedicates this Contribution License Agreement to the public domain according to the Creative Commons CC0 1.

@dotnet-policy-service agree

[Sandeep905]

@Sandeep905 please read the following Contributor License Agreement(CLA). If you agree with the CLA, please reply with the following information.

@dotnet-policy-service agree [company="{your company}"]

Options:

• (default - no company specified) I have sole ownership of intellectual property rights to my Submissions and I am not making Submissions in the course of work for my employer.

@dotnet-policy-service agree

• (when company given) I am making Submissions in the course of work for my employer (or my employer has intellectual property rights in my Submissions by contract or applicable law). I have permission from my employer to make Submissions and enter into this Agreement on behalf of my employer. By signing below, the defined term “You” includes me and my employer.

@dotnet-policy-service agree company="Microsoft"

Contributor License Agreement

Contribution License Agreement

This Contribution License Agreement ( “Agreement” ) is agreed to by the party signing below ( “You” ), and conveys certain license rights to the .NET Foundation ( “.NET Foundation” ) for Your contributions to .NET Foundation open source projects. This Agreement is effective as of the latest signature date below.
1. Definitions.
“Code” means the computer software code, whether in human-readable or machine-executable form, that is delivered by You to .NET Foundation under this Agreement.
“Project” means any of the projects owned or managed by .NET Foundation and offered under a license approved by the Open Source Initiative (www.opensource.org).
“Submit” is the act of uploading, submitting, transmitting, or distributing code or other content to any Project, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Project for the purpose of discussing and improving that Project, but excluding communication that is conspicuously marked or otherwise designated in writing by You as “Not a Submission.”
“Submission” means the Code and any other copyrightable material Submitted by You, including any associated comments and documentation.
2. Your Submission. You must agree to the terms of this Agreement before making a Submission to any Project. This Agreement covers any and all Submissions that You, now or in the future (except as described in Section 4 below), Submit to any Project.
3. Originality of Work. You represent that each of Your Submissions is entirely Your original work. Should You wish to Submit materials that are not Your original work, You may Submit them separately to the Project if You (a) retain all copyright and license information that was in the materials as you received them, (b) in the description accompanying your Submission, include the phrase "Submission containing materials of a third party:" followed by the names of the third party and any licenses or other restrictions of which You are aware, and (c) follow any other instructions in the Project's written guidelines concerning Submissions.
4. Your Employer. References to “employer” in this Agreement include Your employer or anyone else for whom You are acting in making Your Submission, e.g. as a contractor, vendor, or agent. If Your Submission is made in the course of Your work for an employer or Your employer has intellectual property rights in Your Submission by contract or applicable law, You must secure permission from Your employer to make the Submission before signing this Agreement. In that case, the term “You” in this Agreement will refer to You and the employer collectively. If You change employers in the future and desire to Submit additional Submissions for the new employer, then You agree to sign a new Agreement and secure permission from the new employer before Submitting those Submissions.
5. Licenses.
a. Copyright License. You grant .NET Foundation, and those who receive the Submission directly or indirectly from .NET Foundation, a perpetual, worldwide, non-exclusive, royalty-free, irrevocable license in the Submission to reproduce, prepare derivative works of, publicly display, publicly perform, and distribute the Submission and such derivative works, and to sublicense any or all of the foregoing rights to third parties.
b. Patent License. You grant .NET Foundation, and those who receive the Submission directly or indirectly from .NET Foundation, a perpetual, worldwide, non-exclusive, royalty-free, irrevocable license under Your patent claims that are necessarily infringed by the Submission or the combination of the Submission with the Project to which it was Submitted to make, have made, use, offer to sell, sell and import or otherwise dispose of the Submission alone or with the Project.
c. Other Rights Reserved. Each party reserves all rights not expressly granted in this Agreement. No additional licenses or rights whatsoever (including, without limitation, any implied licenses) are granted by implication, exhaustion, estoppel or otherwise.
6. Representations and Warranties. You represent that You are legally entitled to grant the above licenses. You represent that each of Your Submissions is entirely Your original work (except as You may have disclosed under Section 3 ). You represent that You have secured permission from Your employer to make the Submission in cases where Your Submission is made in the course of Your work for Your employer or Your employer has intellectual property rights in Your Submission by contract or applicable law. If You are signing this Agreement on behalf of Your employer, You represent and warrant that You have the necessary authority to bind the listed employer to the obligations contained in this Agreement. You are not expected to provide support for Your Submission, unless You choose to do so. UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING, AND EXCEPT FOR THE WARRANTIES EXPRESSLY STATED IN SECTIONS 3, 4, AND 6 , THE SUBMISSION PROVIDED UNDER THIS AGREEMENT IS PROVIDED WITHOUT WARRANTY OF ANY KIND, INCLUDING, BUT NOT LIMITED TO, ANY WARRANTY OF NONINFRINGEMENT, MERCHANTABILITY, OR FITNESS FOR A PARTICULAR PURPOSE.
7. Notice to .NET Foundation. You agree to notify .NET Foundation in writing of any facts or circumstances of which You later become aware that would make Your representations in this Agreement inaccurate in any respect.
8. Information about Submissions. You agree that contributions to Projects and information about contributions may be maintained indefinitely and disclosed publicly, including Your name and other information that You submit with Your Submission.
9. Governing Law/Jurisdiction. This Agreement is governed by the laws of the State of Washington, and the parties consent to exclusive jurisdiction and venue in the federal courts sitting in King County, Washington, unless no federal subject matter jurisdiction exists, in which case the parties consent to exclusive jurisdiction and venue in the Superior Court of King County, Washington. The parties waive all defenses of lack of personal jurisdiction and forum non-conveniens.
10. Entire Agreement/Assignment. This Agreement is the entire agreement between the parties, and supersedes any and all prior agreements, understandings or communications, written or oral, between the parties relating to the subject matter hereof. This Agreement may be assigned by .NET Foundation.
.NET Foundation dedicates this Contribution License Agreement to the public domain according to the Creative Commons CC0 1.

@dotnet-policy-service agree

@dotnet-policy-service agree company="Microsoft"

[sebastienros]

@Sandeep905 maybe you can check this pr which applies the same fix but on taxonomy editors.

[Piedone]

It adds the exact CSS classes you have to use here too. So, good news, no need for new CSS!

[Piedone]

There's a validation error now even if you select an item in the picker.

Also, when you're done addressing all feedback of a review, click "Re-request review" in the top-right corner for each reviewer when you're ready for another round of review, so they know that you're done.

[Sandeep905]

There's a validation error now even if you select an item in the picker.

Also, when you're done addressing all feedback of a review, click "Re-request review" in the top-right corner for each reviewer when you're ready for another round of review, so they know that you're done.

Yes, @Piedone. It breaks when the class is added to Picker. I am trying to fix it. I tried to add a do not merge tag but could not do that.

[hishamco]

I see there's a new change after I approved, which is makes me worry was the previous class working properly or not?!!

[Piedone]

Don't repeat styling. Try to reuse the input-validation-error class on an element. Better change the HTML structure of the editor to make it compatible with it than add a custom validation error CSS just for this case.

And as mentioned previously, if new CSS is needed, you'll need to run SCSS compilation with Gulp: https://docs.orchardcore.net/en/latest/guides/gulp-pipeline/. If something is Content Picker-specific, then it also needs to be added only the OrchardCore.ContentFields module, and included from only this cshtml. If you search for "optionsEditor.css" in that project, you'll see an end-to-end example of this this can be done.