How to create two webparts within a single spfx solution? - spfx

My ultimate aim is create an spfx project that allows me to add two web parts to an SPO page. The two webparts will be connected to a different custom list each. Webpart (A) will have a button next to an item, if the user clicks that button then it will filter Webpart (B) based on what the ID of the item in Webpart (A).
I've already created an spfx project. It currently has one .ts file which has the 'entry point' to the project.
This allows me to add that webpart to an SPO page. As mentioned above I want to be able to create two different webparts to an SPO page.
The question: Would I create two 'entry point' .ts files? Or is this not necessary?
If it's not necessary, how do I make it so?
Is there any sample code apart from this -
https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples/react-events-dynamicdata
For your information here is some of the entry point code I'm referring to:
...
export default class ConnectedWebpartsWebPart extends BaseClientSideWebPart <IConnectedWebpartsWebPartProps> {
public onInit(): Promise<void> {
return super.onInit().then(_ => {
// other init code may be present
pnpSetup({
spfxContext: this.context
});
});
}
...
Tom

It's simple - just use Yeoman and run another yo #microsoft/sharepoint within the folder of your existing project.
Now to try to get those 2 webparts connected....that's the tricky bit.

Related

Lightswitch Forms Authentication logout button on multiple pages?

Lightswitch provides a Logout button on the Home page by default, but I'd like to have the option to log out on other pages as well. Is it possible to place the logout button on multiple pages?
If you're working with the HTML client, this can easily be achieved by replacing the following line of code in the LightSwitch library's _determineButtons function: -
result.showLogOut = msls_shell.getHomeScreen() === navigationUnit.screen.details.getModel();
With the following line of code: -
result.showLogOut = true;
This function is located in Scripts\msls-?.?.?.js file and, in order for this type of library file change to be applied, you'll need to reference the un-minified version of the LightSwitch library by making the following change in your HTML client's default.htm file: -
<!--<script type="text/javascript" src="Scripts/msls-?.?.?.min.js"></script>-->
<script type="text/javascript" src="Scripts/msls-?.?.?.js"></script>
The question marks in the msls reference will need to mirror the version you're using e.g. msls-2.5.2.js (for Visual Studio 2013 Update 4).
The above approach will force the LogOut button to appear on every page. However, if you need more control over when the LogOut button appears, you could use the following alternative change in the _determineButtons function: -
result.showLogOut = window.msls.showLogOut;
Then, in the created method of each screen, set the msls.showLogOut property to true when you wish the button to appear and to false when you don't e.g.: -
myapp.BrowseContacts.created = function (screen) {
// Write code here.
msls.showLogOut = true;
};
You don't say what version or language. This is VB for VS2012, Lightswitch web application.
Add a button to the Screen Command Bar, call it Logout (you can choose an image for it in the Properties panel later if you want). Right click the button and select Edit Execute Code. Use the following:
Private Sub Logout_Execute()
Microsoft.LightSwitch.Threading.Dispatchers.Main.BeginInvoke(
Sub()
System.Windows.Browser.HtmlPage.Window.Navigate(New Uri("../LogOut.aspx", UriKind.Relative))
End Sub)
End Sub
Works for me.
Phil

Play 1.2.4 Mobile and PC design on the same app

I am a new developer in Play world! For a project I need to have a mobile and desktop version. But I don't know how to!!
Create 2 applications, share the model..;
Create a mobile controller to separate the desktop views against the mobile views
I have no idea of how to make this properly. I know the responsive design but I can't use it on this project.
Thanks
PS: Sorry for my english
Depending on the use case I would have a look at a framework like Twitter Bootstrap. With the twitter bootstrap you can use ONE set of view templates for both desktop and mobile. There is also a framework called Kickstrap and a few others.
But on the other hand, if you want to develop some sort of 'backend' or 'admin' application (you still CAN use twitter bootstrap, but you might have a look at frameworks like Sencha (EXT JS and Touch) or Kendo UI.
What ever you choose, Play will enable you to develop the serverside as it should be (RESTful), so the choice for the frontend can change in time, but you app architecture will be fine :-)
Either one is okay. As they are essentially the same thing, 2 set of routes/controllers/views plus 1 set of domain models.
If you are using my play clone, then you can simplified it to 1 set of domain model + 1 set of routes/controllers + 2 set of views, as you can do something like follows:
public class Application extends Controller {
...
#OnApplicationStart
public static class ViewRouter extends Job {
Controller.registerTemplateNameResolver(new ITemplateNameResolver(){
#Override
public String resolveTemplateName(String templateName) {
return UserAgent.isMobile() ? "mobile/" + templateName : templateName;
}
});
}
}
Thus you just put your mobile views under app/views/mobile and all others still remain in app/views, the template will be loaded dynamically based on the request's user agent, if it's coming from a mobile device then app/views/mobile/.. version get loaded otherwise, the normal view will be loaded.

migrating from ASP.NET profiles in website to web application project (cannot handle propertygroups)

I am transfering my solution from a website project to a web application project. In the process I am migrating profiles as well. Part of migrating from website to web application is that I need to write my own Profile-class as described here: http://leedumond.com/blog/asp-net-profiles-in-web-application-projects/
This works fine for all my existing properties except those belonging to a propertygroup.
In my website I had a propertygroup called "Facebook" for storing facebook-specific details. But in my web application project I cannot access these properties. Instead it seems to overwrite my existing properties with new empty ones. When I look in the database I can see that the old properties were stored as eg. "Facebook.FacebookUserId" whereas the new properties are stored as just "FacebookUserId" (without the "Facebook"-prefix). So my question is how to get my old properties ? I have tried creating propertygroups as proposed in the link above, but this just leads to a new xml-property (serializing the class).
Right now I am fetching the properties like this:
public long FacebookUserId
{
get
{
return (long)GetPropertyValue("FacebookUserId");
}
}
I have also tried:
public long FacebookUserId
{
get
{
return (long)GetPropertyValue("Facebook.FacebookUserId");
}
}
But none of this seems to work.
Any help is appreciated
thanks
Thomas
I ended up doing a search and replace on the Facebook-prefix, and removed it

Custom BasePage causing design view to break

I was getting fed up with typing this.NavigationService.Navigate(new Uri(page.xaml, UriKind.Relative));, every time I need to navigate to a different page in my app.
So I've created a custom BasePage with a virtual to help with Navigating around my app.
The problem I have is in VS2010, if I have the source and design view open, the design just shows the windows phone background and I get some blue wiggly lines right from the top to the bottom of my xaml and messages along the lines of x isn't supported. This happens on any page that I have set up to Inherit from my custom BasePage.
However, if I run the application on my Windows Phone or in the Emmulator it will work.
Does anyone have any suggestions of what I could try to keep my Design view working whilst apply my custom base, or if I have missed something off?
A slightly cut down version of my BasePage is:
public class BasePage : PhoneApplicationPage
{
public virtual void NavigateTo(string pageName, params Tuple<string,string>[] queryString)
{
// Code to perform this.NavigationService.Navigate
}
}
EDIT 2011-08-16
Part of this base page overrides the PhoneApplicationPage's OnNavigatedTo method, in which I perform a security check to see if:
security has been enabled
User is logged in
If the security is enabled but the user is not logged in, they are immediately redirected to a Login Page.
I found this useful as I don't then have to add any code to existing or new pages to handle this, so long as they derive from the BasePage.
I wouldn't recommend using a BasePage for this. Instead, simply add your NavigateTo method in the App.xaml.cs file, as a static method.
public static void NavigateTo(string pageName, params Tuple<string,string>[] queryString)
{
// Code to perform this.NavigationService.Navigate
}
Also, remember to wrap the call to .Navigate in Dispatcher.BeginInvoke so all transition effects are properly executed.
And as a bonus tip: Don't use the designer in Visual Studio. Instead, set the 'default editor' for XAML files to be the "Source Code" editor, so the designer is never opened. This makes Visual Studio much more stable.
If you want a designer, you should get Microsoft Expression (Blend)

Ninject + MVC3 = InvalidOperationException: Sequence contains no elements

I created a new MVC3 project, hit F5, saw the sample page.
Then I used NuGet to get the Ninject.MVC extension. I modified my global.asax according to the Ninject documentation, How To Setup an MVC3 Application:
public class MvcApplication : NinjectHttpApplication
{
public static void RegisterGlobalFilters(GlobalFilterCollection filters)
{
filters.Add(new HandleErrorAttribute());
}
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
"Default", // Route name
"{controller}/{action}/{id}", // URL with parameters
new { controller = "Home", action = "Index",
id = UrlParameter.Optional });
}
protected override IKernel CreateKernel()
{
var kernel = new StandardKernel();
kernel.Load(Assembly.GetExecutingAssembly());
return kernel;
}
protected override void OnApplicationStarted()
{
base.OnApplicationStarted();
AreaRegistration.RegisterAllAreas();
RegisterGlobalFilters(GlobalFilters.Filters);
RegisterRoutes(RouteTable.Routes);
}
}
Now when I run the app, I get the yellow screen of death with the following exception:
InvalidOperationException - Sequence contains no elements.
at System.Linq.Enumerable.Single(...)
at Ninject.Web.Mvc.Bootstrapper.Initialize(...)
line 67.
And sure enough, line 67 of that file calls .Single(), thus throwing the exception.
What am I doing wrong?
I have to add to this in the hopes that someone else will resolve the issue more quickly and not want to pull out every strand of hair on their head like I almost did.
I needed to rename everything in my project to match new business terms. I changed namespaces everywhere and I even changed the Assembly Name (right-click project > properties > application tab) so that the generated assembly matches the new naming convention. The assembly rename is what made Ninject very angry!
By renaming the assembly that gets generated a new file with the new name was being created when we compiled. However, the old file with the old name was still in the bin directory! If you have Ninject activating via the added class in App_Start then this activation class will get invoked in BOTH assemblies (old one AND new renamed one). Don't ask me how or why, but it does and it gives you this "already initialized" error.
Not even cleaning solution works because Visual Studio will only remove the binaries that it is generating, which would be the new renamed ones. It leaves the old ones alone just sitting there.
Go delete your bin folder before you try doing anything else! I hope this saves someone else from wasting valuable working hours!
You might notice that after installing the ninject.mvc3 NuGet there is an App_Start subfolder created inside your project containing an NinjectMVC3.cs file. Delete this folder and try again. So here are the steps I followed:
Create a new ASP.NET MVC 3 project using the default template
Bring up the Package Manager Console window (View -> Other Windows -> Package Manager Console)
Type install-package ninject.mvc3 on the command line
Replace the default code in Global.asax with the code in your question
Delete the AppStart subfolder created during the installation of the package
Run the application
Enjoy the beauty of the /Home/Index default page opened in your Google Chrome web browser :-)
I have updated the documentation Wiki linked in your question to show both ways to setup a MVC3 application. I suggest to use the second option which is the prefered way for theNuGetpackage.
Instead of deriving from NinjectHttpApplication it is using the NinjectMVC.cs in the AppStart folder which is created during installation of the package. This is also the location where you create the kernel and where you load your modules or where you define the bindings.
As Alex Ford said:
I have to add to this in the hopes that someone else will resolve the
issue more quickly and not want to pull out every strand of hair on
their head like I almost did.
I had a special version of that problem which could get solved as follows:
Exception Details: System.InvalidOperationException: Sequence contains no elements
This error is caused by the fact that there are 2 projects with
App_Start/NinjectWebCommon.cs
Removing the file eliminates the error.
Note: if you are nu-getting Ninject.Web.Common because you need to
reference Ninject.Web.Common assembly for one of your class library
project, you can safely remove the “App_Start” folder and
“NinjectWebCommon.cs”. It is meant for web/web api projects.
>click here to view the original blog entry<
My solution was that I had set the App_Start folder property, Namespace Provider to True.
I had changed this to False so that Resharper wouldn't highlight the namespace NOT matching the folder structure.
Wanted to add one more cause ...
We installed the Ninject.MVC3 package to multiple projects - only one of which was an actual MVC applicaiton. However, we forgot to remove the App_Start folder.
Removing the App_Start folder from the referenced project resolved the issue.
To tack on to #Chev's answer... this was my ultimate issue as well. If you're deploying to an Azure Website (now named AppSite), you want to click on this box in the publish to remove old files

Resources