Can more than one scss be used for one SPFx Web Part? - spfx

I am new to The SharePoint Framework (SPFx). I am trying to convert old Content Type Web Part into SPFx Web Part. Earlier we have used multiple css files and included into html page. But for SPFx Web Part, I got stuck for how to use more than one scss for one Web Part. I searched but found suggestions on how to give give names of scss for your Web Part but no where i found like it allows only one scss or something.
So i would like to know whether it is possible to have multiple scss file for one web part or not? And if yes then how?

This should be quite easy to accomplish. Just add a new .module.scss file to your solution and reference it with a unique identifier.
Example:
import styles from './Existing.module.scss'; // this is the one you already have
import additionalStyles from './Example.module.scss'; // your new module
Then you can reference these like <div className={additionalStyles.awesomeClass} />

Related

generate html template engine i18n

I am searching for a solution to modularize static html files and to add multilanguage support. I want to generate static html files with gulp which are then served through an apache server.
I am now thinking about using the template engine marko to modularize html files and to prerender html files (handlebars would also be an option; jade is no option cause i don't like the syntax).
For multilanguage support i am thinking about to add an i18n plugin (for example https://www.npmjs.com/package/i18n). But this plugin needs an express server; also for multilanguage i want to prerender the files. Has anybody a hint for me which i18n plugin would best fit for me? Maybe also which one would best work together with marko and gulp?
The result should be html files generated inside /de and /en.
The following sample app might help: https://github.com/marko-js-samples/marko-koa-i18n
It is a server-based app that uses Koa and koa-i18n, but you can directly use i18n-2 to accomplish the same thing.
Disclaimer: I have not used i18n-2 or koa-i18n
A few things to note:
A custom tag is used to introduce a local variable that can be used to access the i18n bundle: (see: src/components/app-hello/template.marko and src/taglib/i18n-var-tag.js)
The i18n bundle is pulled out of out.global.i18n. See: Marko > Global Properties
The following Gulp plugin is currently out-of-date, but it might serve as a good starting point or you can submit a PR to improve it: https://github.com/viviangledhill/gulp-marko
In your case, you will want to prerender each template multiple times, each time with a different i18n bundle instance passed in as a global property.
If you would like more details please ask here or in the Gitter chat room: https://gitter.im/marko-js/marko
Hope that helps.

How to create a custom component for Joomla 3.3?

I'm new to Joomla and I'm confused, so I need your advice on this. I have to create a plugin which connects to an API and shows base64 PDF on a page. So, I created my PDF viewer, but I don't know how to pack it up in Joomla. It's not just "custom HTML", it has to be a separate package so it can be installed on other Joomla sites. I guess it also has to have a database to store some settings (e.g. API URL). I want users who install this extension to be able to go to Modules > New Module > PDF Viewer, and from there they can set up API URL for that module. Users will be able to create modules of this type on multiple pages and to be able to set different API URL for every page. So, what do I need? An extension, component, module...? I searched for tutorials and read Joomla docs but I'm still confused. Please help me, what to do, some guide, where to put files, where to upload them etc. Thanks
You could actually go about this with a component, plugin or module:
I think a component would be the most complex in this situation. As you are probably already aware, a component is like an application which renders itself in the main click of the website.
If you were to create a plugin, you could generate a short code snippet based on the name of the plugin which could then be added to an article, which would then display the PDF within the article. For example:
{PDFgen=NAME_OF_PDF}
or
{PDF}name_of_file.pdf{/PDF}
Creating a module in my opinion would be the easiest. As once you've added the functionality to render the PDF, the user can either display it as a module (like a sidebar widget), or they can also import it in their article using a built in Joomla feature. Assign a custom position to the module, then add the following anywhere within an article: {loadposition XXX}, where XXX is the name of the custom position you assigned to the module.
Out of all honest, you should develop it in a way you feel most comfortable with. Just make sure when you do it, that you stick to Joomla coding standards.
Hope this helps

How to build a paper-element app with dart?

I want to build a large application in Dart using material design. To accomplish this I included paper_elements into my project. My problem is, that I can't think of a good way to build my multi page application with paper_elements. Usually I create objects which would create their elements inline and add / remove themselves to the dom. The way I understand the paper_element tutorials I found so far this is not possible with them.
Is there a simple way to use paper_elements in dart while having an object based structure? For example I would have my application which loads either a register or login object and displays it in the browser. When logging in it should load a menu object which displays a menu and so on. All page changes should happen without a page reload.
I'm looking forward to all help, examples or links you could provide regarding my problem.
Cheers,
Tim
In Dart you normally build the app as SPA (single page application) without reload.
You can add remove a paper-element like normal DOM elements (div, input, ...) querySelector('#placeholder').append(new Element.tag('paper-input'));
You can also use <template if="{{}}"> or <template repeat="{{}}"> to make Polymer auto-insert these elements when certain conditions are fulfilled or for each value in a collection.
Your question isn't very specific but I guess all you need is already available here on SO as Q/A. Just search for [dart-polymer]. If you don't find anything just ask and we point you in the right direction.
a few that might be relevant
Dart Language: Polymer - Working with views
How to update polymer element bindings after it was removed from DOM and inserted again
How to add attributes to a dynamically created component
how to implement a main function in polymer apps (you don't need a main() when you use a polymer-element that acts as a container for your entire application)
Is imperative Mustache-Binding in Polymer.dart supported?

what is the correct approach in order to host / integrate / show my existing MVC3 project inside orchard?

I've an existing MVC3 project that implements a certain functionality, this project has it's own views, and a separate Database.
now I'm required to use the same functionality inside one of my orchard project,so I thought that I can host this solution in somewhere and view it inside an iframe or something.
Am I thinking right?,
is this the correct step to take in order to achieve this requirement inside Orchard?
to make it more clear, all I need to do is to view this solution and interact with it's controls and views from a hosting page inside orchard, and the subsequent requests should be handled by my solution in order to hit it's own data store and get back with the requested data in order to be displayed to the user.
any help would be appreciated.
Update:
thanks for Bertrand Le Roy for his answer, I can now view my solution inside my
orchard website.
I came in to one more HUGE problem, which is that my application can no longer connect to my external database.
I've a DB that is hosted in some where else, and I'm using EntityFramework to deal with it.
the problem is that if I put the connection string inside my module web.config, or main orchard web.config, I run into several types of errors like:
"System.Reflection.TargetException: Object does not match target type."
or
"System.Data.MetadataException: Unable to load the specified metadata resource."
My question is: How could I pass my connectionstring correctly to my solution, assuming that I'm using Entity framework as my ORM.
Many thanks.
You will need to put it into a module.
You will have to move route definitions to a Routes.cs file (look at any existing such file for examples).
You will also need, in order to access your data store, to opt out of the ambient Orchard transaction around the data access code (using (var scope = new TransactionScope(TransactionScopeOption.Suppress))).
If you are using dependency injection, you may have some work to move that to the Autofac-based way of doing things in Orchard.
If you want your work to appear seamlessly in the Orchard admin, you may want to decorate your admin controllers with the Admin attribute. If you want your front-end to use the current theme, you'll have to add Themed attributes and maybe refactor your views so that they only emit HTML for the content zone instead of for the whole page.
Add a manifest (module.txt) to your module folder and you should be good to go.

customizing componnet in joomla

i have created a component using this http://www.notwebdesign.com/joomla-component-creator/index.php component creator how can i add a simple registration form in that and also make its backend looks like the other component
The name of that utility is a little misleading since it only creates the structure of a component. If you want to add functionality to the structure created you will need to actually put in the code that does what ever you need it to do. Think of this as the foundation and framework of a house. You actually have to put the walls up and furnish it.
It would probably be helpful to understand the files that have been created for you so you know what needs to be added. I would recommend learning how to build a component from scratch first. Joomla has pretty good documentation on that here - http://docs.joomla.org/Developing_a_Model-View-Controller_Component_-_Part_1
i have develop the Lots of component from this site http://www.notwebdesign.com/joomla-component-creator/index.php .
1) First Create the components and give the name and crrate the require field fo the registration from .and save the components then after the download this components.
2) Install the components in your joomla site.
3) Go to the Fornt-end view components folder. and create a form in the default.php page and save and update operation query is written in the model .
Your Registration page is ready.
This tutorial is the best I have come across so far. It will hopefully guide you to understand the MVC structure that the component generating site delivers to you.
I am actually the developer of the Component Creator you have used. It only creates the MVC files and structures needed to quickly create a component. You still need quite good PHP skills to develop a fully working component.
The component creator helps developers with the tedious tasks of building the framework.

Resources