I'm new to Sharepoint Framework but I used the 'yo #microsoft/sharepoint' command to create a new React/SPFx project. However, in doing so it seems that I don't have access to some of the CSS classes available in OfficeUI Fabric. For example if I try to create a typical grid layout, the ms-Grid-row and ms-Grid-col classes work as expected but the sizing utility classes do not (ms-sm6, ms-lg6). Other fabric classes work as well such as ms-bgColor-neutralLight, ms-font-xl, and ms-fontWeight-semibold ... so a portion of that styling is coming through.
If I add a link reference to the workbench.html file pointing to the CDN of fabric.css I get those classes working again....but that is not a solution since that file is just a temporary file build for testing at compile time.
Is there something else that needs to be done to include fabric.css (or fabric.min.css) in my project?
I am running into the same issue. Yeoman generated SPFX webpart (React) for an on premises instance. Digging into the node module, I found the classes didn't match the documentation. Where the documentation would say to use ms-md6, the css file has ms-u-md6. Seems like all of the layout classes follow this pattern of ms-u- rather than just ms-... Adding the -u to the className is now giving me appropriately sized columns.
The path to the file I found the classes in is: .../node_modules/office-ui-fabric/dist/css/fabric.css (YMMV)
Related
we're working with Apostrophe CMS v3 and we're trying to add some custom apps to the pages with React. I was able to add components inside using the React CND scripts and loading components as script files in views/layout.html. But it probably isn't best practice. I was wondering if theres a way to add React apps into Apostrophe using npm packages and imports. Thank you very much!
It looks like this question was cross-posted to the Github Discussions forum: https://github.com/apostrophecms/apostrophe/discussions/3393
The response there from the lead software architect:
You can do it in two ways. Which is best depends on your needs.
If you are building a single-page React app but you need some dynamically edited CMS content, you should most likely keep building your React app just as you have been, and use Apostrophe's REST APIs to access piece and
page CMS content where you need it. See the documentation on our REST APIs.
On the other hand, if you are building a pretty normal CMS-driven website
but you have a few experiences inside your pages that would benefit from
embedding a React application, you should carry on with your Nunjucks
templates for Apostrophe as you normally would to build a website with
Apostrophe, and in addition set up a webpack build of your own to build
your React apps, and push the output to a ui/public/build.js file nested
in any module of your Apostrophe project. Any .js file found in a
ui/public subdirectory of a module is automatically included in the
frontend bundle generated by Apostrophe.
In that situation, you can still use the REST APIs to access data from the
React app, or you can pass data via data attributes in your markup. If you
do the latter, the | jsonAttribute Nunjucks filter is helpful to turn it
into a string that is safe for incorporation into a quoted attribute in
your markup.
Hope that helps!
I made the shift from Vue over to React and I enjoy using the CRA tool to make interfaces on SharePoint. My normal methodology involves building the app and linking the build index.html file to a SharePoint Content Editor Web Part (CEWP).
I recently needed to have two CRA builds on the same page and I am running into the issue where control of the DOM by one build overwrites the content of the other build on the page.
It is now my understanding that multiple CRAs cannot exist on the same page. I do not want to eject my apps. In my research, it seems that webpack is assigning this["jsonpFunction...] to both apps. One suggestion I read involved finding and replacing all instances of this in one of the apps and changing it to "window.jsonpFunction...". I could not get that working either.
I want to continue using CRA and linking the index.html of the builds to different web parts on the same page.
Any suggestions appreciated.
Very Respectfully,
I solved my SharePoint on-premise issue with multiple React builds working in separate web parts by doing the following.
In package.json ensure the "name" field is unique. Also, ensure you have a "homepage" variable set to the location you intend to copy the build index.html file.
In index.js set the document.getElementById to a unique name not used by other React projects that will exist on the same page.
In index.html make sure the name used for the root div is identical to the one used in step 2 above.
In the manifest.json, provide a short name and name for your App. This step doesn't seem mandatory but I did it for consistency in my projects.
Now you can build and copy to SharePoint. I use Content Editor web parts with each pointing to the applicable index.html file for the app. Works great!
I need to create some iframe, but there is a lot of components from the current project that can be used.
So the question is how to configure webpack to create multiple builds, i.e one is standard build and second is iframe_build.
Reason for this approach is the reusability of components from the main project.
Is this even possible or I will need to start a new project from scratch and copy components from the main into a second project?
So after short investigation i found that
best solution for keep iFrame generation on main project and reuse components without create new project is to create public route and create component that can be used to show content in iFrame on other domain.
My team is creating the administration panel of a CMS using React, Typescript, TSX and Webpack. Each page of the administration panel has been created as a React component, and each page contains many other child components (one for each section).
The CMS distribution currently includes a bundled version of the javascript needed to run the web app, but not the original TSX files.
Now, we would like to make it possible to the developers using our CMS to extend the web app by
1) Injecting additional sections into the UI using a "slot-fill" approach
2) Possibly even overriding the existing sections rendering a different component in the same place.
<div>
<SidebarComponent />
<Section1Component />
<Section2Component />
// How to inject a possible PluginComponent here?
</div>
From the research we've conducted so far, there seem to be no "official" way to do this, so I'm wondering what would be the best approach in this case.
I am facing the same issue where I need a component from a plugin to interact with a component from another plugin with a hook system. I have a created a small codesanbox with the same approach adapted to your need.
Basically the approach is to create a injectedComponents.js at the root of your plugin that specifies in which plugin and area your component needs to be injected.
Here is ademo
single-spa has some good options in order to achieve this.
Please see if it can be help for you.
Microfrontends
Parcels
I am late to this but
Just create a utility class with registry function, and register each component to the registry (just dictionary of key value pair, where key is a constant and Value is the component). T
Then when you display a component in your base app, get it from the registry using a key. Then once you publish this whole base app as package ( make sure to export the utility registry). A user can register a component with the same name and override the default component.
For communication between totally independant components, you can use and EventEmitter
We have bought an admin theme from Themeforest for our web application, which is being built using CakePHP2 framework. I know the basic way of integrating this theme into the cakephp framework, where we put the respective JS, CSS files under webroot folder and create layout to includes these files.
This method does give me desired results but I feel this is not the best way to integrate a theme in a MVC architecture. Because it does not work always for example, if i want to use just a look and feel of the downloaded theme and use Cakephp's pagination method it does not work seemlessly and i then need to keep tweaking the UI. Thus, I think there must be a best practice to integrate such themes. Can anyone suggest me if there is any better way of doing this integration?
I tried to search for such articles on the internet but did not find any suitable ones.Can you point me to one if you know or suggest any better way?
Thank you in Advance.
It sounds like you have integrated your purchased theme correctly.
Because the theme you purchased was not created as as CakePHP theme, the CSS is unlikely to match. This is what is causing your issue with some features not displaying correctly, such as CakePHP's pagination... the pagination helper ads HTML to the view in CakePHP that will more than likely not be covered by your general html theme.
For any instances you find that do not look like you expect, you will have to manually add CSS to your themes CSS file, or if your lucky just rename the CSS styles already in place.
Sorry, there is no easy way to fix this except manually integrating the missing CSS/HTML.
Good luck.