'Client resources are not loading to custom block

I need help with Client resource importing, According to the documentation I have created ClientResourceProvider and QbankClientResourceRegister. Kindly check the following.

QbankClientResourceRegister :

[ClientResourceRegistrator]
    public class QbankClientResourceRegister : IClientResourceRegistrator
    {
        public void RegisterResources(IRequiredClientResourceList requiredResources)
        {
            requiredResources.Require("epi-cms.widgets.base").AtHeader();
            requiredResources.Require("qbank.picker").AtFooter();
        }
    }

ClientResourceProvider :

[ClientResourceProvider]
    public class ClientResourceProvider : IClientResourceProvider
    {
        public IEnumerable<ClientResource> GetClientResources()
        {
            return new[]
            {
                  new ClientResource
                  {
                    Name = "epi-cms.widgets.base",
                    Path = Paths.ToClientResource("QbankModule", "ClientResources/Scripts/Editors/QBankMediaPicker.js"),
                    ResourceType = ClientResourceType.Script
                    
                  },
                  new ClientResource
                  {
                    Name = "qbank.picker",
                    Path = Paths.ToClientResource("QbankModule", "ClientResources/Scripts/qbank-connector.js"),
                    ResourceType = ClientResourceType.Script
                  }
            };
        }
    }

module.config file in the moduel folder :

<?xml version="1.0" encoding="utf-8"?>
<module name="QbankModule" loadFromBin="false" clientResourceRelativePath="" viewEngine="Razor" authorizationPolicy="episerver:cmsadmin"
        moduleJsonSerializerType="None" preferredUiJsonSerializerType="Net">
  <assemblies>
    <add assembly="Qbank.Connector.EpiServerModule5" />
    <add assembly="Qbank.Connector.EpiCore11" />
    <add assembly="Qbank.Connector.EpiCore" />
    <add assembly="Qbank.Connector.Core" />
  </assemblies>
  
  <clientResources>
    <add name="epi-cms.widgets.base" path="ClientResources/Styles/qbankplugin.css" resourceType="Style"/>
    <add name="qbank.picker" path="ClientResources/scripts/editors/QbankMediaPicker.js" resourceType="Script"/>
  </clientResources>
  
  <dojo>
    <paths>
      <add name="qbank" path="ClientResources/scripts" />
    </paths>
  </dojo>
</module>

I need to load QbankMediaPicker.js when loading the following specific block :

[ContentType(
    DisplayName = "Banner",
    GUID = "0d1c8743-4d48-470f-8afb-7e62d84f6092",
    GroupName = SystemTabNames.Content)]
    public class BannerBlock : BlockData
    {
        [Display(
           Name = "Header",
           Description = "Enter a header for the block",
           GroupName = SystemTabNames.Content,
           Order = 1
           )]
        [Required]
        public virtual string Header { get; set; }

        [Display(
            Name = "Description",
            Description = "Enter a Description for the block",
            GroupName = SystemTabNames.Content,
            Order = 2
            )]
        [Required]
        public virtual XhtmlString Description { get; set; }

        [Display(
             Name = "QBankSampleImage",
            Description = "QBankSampleImage for the block",
            GroupName = SystemTabNames.Content,
            Order = 3)]
        //[Qbank.Connector.EpiCore.DataAnnotations.MediaFormat("#310")]
        [UIHint(Qbank.Connector.Core.Web.UIHint.QBankMedia)]
        public virtual ContentReference QBankSampleImage { get; set; }

Also got this form a forum:

Requiring resources from a partial view/compontent has stopped working in CMS12. The fix will be released in 12.4.0. See forum thread here: https://world.optimizely.com/forum/developer-forum/cms-12/thread-container/2022/2/require-client-resources-only-when-specific-block-type-is-rendered/

Actually, I upgraded EPiServer.Framework and EPiServer.CMS.Core packages to the latest version (12.4.0). But it seems the EPiServer.CMS package does not have version 12.4.* yet. But still, I can't get the client resources imported when I'm creating my custom block.

Regarding the versions, I noticed that fixes will be released on version 12.4.0, so is it on EPiServer.CMS package? or in EPiServer.Framework / EPiServer.CMS.Core packages?

if it is EPiServer.CMS package, does it means that we need to wait for the next release (12.4.0) with the fix? Or do you know any workaround for this?

content-management-systemepiserver


Solution 1:[1]

Your should have something like the following to tell the CMS which client resources your component requires:

public class MyBlockViewComponent : ViewComponent
{
    public MyBlockViewComponent(IRequiredClientResourceList requiredClientResourceList)
    {
        requiredClientResourceList.RequireScript("/scripts/some-script.js, "someName", new[] { "someDependency" }).AtFooter();
    }

    // ...
}

Also, you need to make sure Footer and/or Header sections are rendered somewhere, for example in your shared layout view, like @Html.RequiredClientResources("Footer").

Edit: Note that you can use slightly different syntax to load a named resource instead of an explicit path, above was just from some sample code.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions