(Preface: I'm coming from a C#/WPF background, and brand new to web dev in general - bear with me!)
Using Angular 2, I am able to define my routes like this:
RouterModule.forChild([
{ path: 'contacts', component: ContactsComponent }
])
Then, in some html, I can refer to it using the routerLink syntax:
routerLink='/contacts'
This works great, and ultimately it allows me to replace the string with a binding, so I can get the paths at runtime, allowing the data to determine the navigation structure.
Now, I'm attempting to do something similar in Ionic 2, but if it's possible, it's not obvious to me. I've seen how you can use [navPush] to bind to a page using deeplinking (like this person did: http://plnkr.co/edit/syUH0d6SJd2gAjqaPLwr?p=preview), but that requires the page to be defined ahead of time in the component that wants to use it.
Does Ionic's navigation structure support this?
After a lot of digging, I've found what I was doing wrong.
Here's how to direct link to a path, using Ionic v2 deep linking:
In app.module.ts imports add:
IonicModule.forRoot(MyApp, {}, {
links: [
{ component: ContactsPage, name: 'ContactPageName', segment: 'contacts' }
]
Make sure to also add the ContactsPage to the declarations and the entryComponents.
Then, in the html of the page initiating the navigation, you can use it declaratively, like this
navPush="ContactPageName"
Note you are using the name of the direct link!
In my case, I'm getting a list of items from a json file, so looping through them like this:
<ion-item *ngFor="let contact of contacts" detail-push>
<button ion-button navPush="{{contact.link}}">Go</button>
</ion-item>
where my json file includes:
"link": "ContactPageName"
Hope that helps someone else!
Related
I’m using Calendly in my Webflow project, and it works.
However, I would love to pre-fill the form in Calendly, and there is a guide to do so here: https://help.calendly.com/hc/en-us/articles/226766767-Pre-populate-invitee-information-on-the-scheduling-page
I’ve managed to make the url look like this, using custom code:
mywebsite.com/book-meeting?name=MyFirstname%20MyLastname&email=myemail#test.com
But for some reason Calendly is not pre-filling the form.
Is there anyone else, who has tried this and made it work?
Thanks!
It sounds to me look you would like to pass custom pre-fill values to your embedded Calendly Link.
The best way to do this is to use Calendly’s Advanced Embed Options: https://help.calendly.com/hc/en-us/articles/360020052833-Advanced-embed-options#4
In order to do this you will need to supply your pre-filled values like Name and Email directly to specific Calendly link being embedded. In your example: mywebsite.com/book-meeting?name=MyFirstname%20MyLastname&email=myemail#test.com, it looks like you are passing the pre-fill values to the entire page address rather than specifically to the calendly.com/… scheduling link found in the embedded script.
The best way to do this is as described in help article referenced above. You can add pre fill values script like so:
prefill: {
name:
email:
customAnswers:
}
so that the script to embed Calendly would look something like:
<script>
const params = (new URL(window.location)).searchParams
Calendly.initInlineWidget({
url: 'https://calendly.com/YOUR_LINK/30min',
prefill: {
name: params.get('name'),
email: params.get('email')
}
});
</script>
Where we are taking the parameters from the page url and passing them to Calendly embedded widget. (Note: in this example, I am using an Inline Widget but you can replace this portion of the script with the appropriate API method, ie. Calendly.initBadgeWidget or Calendly.initPopupWidget)
Hope this helps, happy scheduling!
I would like to embed the swagger UI in a page on my blazor app. I am having a hard time finding examples of how to do this with razor pages. Does anyone have any examples doing this? I am usually more of a back end developer so struggling a bit getting this front end up and running.
Although this is quite an old issue, I've decided to try and find the answer as I wanted to embed the Swagger UI into one of my pages myself.
It turns out that it is quite easy to do it!
All credits go to this repository - owner 'jsauve'.
He shows that you can do it:
Here are the steps that you need to do in order for it to show on your page:
Install Swashbuckle.AspNetCore on your Blazor Server.
In Startup.cs, ConfigureServices add:
services.AddControllers();
services.AddSwaggerGen(c =>
{
c.SwaggerDoc("v1", new OpenApiInfo { Title = "My API", Version = "v1" });
});
In Startup.cs, Configure add:
app.UseSwagger();
app.UseSwaggerUI(c =>
{
c.SwaggerEndpoint("/swagger/v1/swagger.json", "v1");
});
Simply, create Razor Component and add:
#page "/test"
<iframe src="swagger" style="width:90%;height:1200px;border:none;" />
Navigate to /test from your e.g. MainLayout.razor. I hope it can help somebody because it certainly helped me.
Giving Svelte/Sapper a look and am curious what the right way to add something like Google Sign-In for Websites to my app.
I have everything working from the example code they give you from the site above, but I've done it by adding the onsuccess "onSignIn" function to the template.html file which doesn't seem like the right way to do this.
Inside src/routes/template.html
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
console.log("ID: " + profile.getId());
}
</script>
Inside src/components/Nav.svelte
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
The code above works fine because onSignIn has access to window, but it seems like I should be able to add this to the Nav component where the button itself lives. Is there a preferred way to handle something like this?
If anyone is looking for something similar, I found this git repo that I was able to get started and modify to suit my needs github.com/beyonk-adventures/svelte-social-auth.
I am trying to get a page property in the head of my page basically to make it universally available so that the front end developers can use it in their scripts as they will.
This is on AEM 6.3. And I've already tried to include a script in the head.html but it can't read the page properties in a script tag.
<script>
window.myAppEndpoint = {
baseURL: "${properties.myappendpoint}"
};
</script>
I expect the window object to populate with my endpoint value be able to use it anywhere in the application.
You should be able to do this provided:
The myappendpoint property is defined for the page jcr:content node
You are using the proper display context: baseURL: "${properties.myappendpoint # context='uri'}"
You can create a global object in js and include that js in the clientlib at the template level.
Or use the global objects available in HTL. Please have a look here.
here I'm routing one component to another using routerLink and also using [queryParams] to pass parameters.
RouterLink and everything works fine but when I pass parameters using [queryParams], all these parameters shows in the url which is not expected. Because I want to keep my url fresh and readable.
Example:
<html>
<div routerLink="/list/article" [queryParams]="{tag: 'news', order: 'asscending', largeImage="true"}
</html>
I don't wanna show my queryParams on the url. Is there any trick or any other ways to avoid this issue.
Thanks in advance sir.