Hide page parameters in Flutter web app URL - flutter

Let's say I have a page names example.com/items that contains list of items. I click on one item and it goes to example.com/[clicked_item_name] that contains name of the item. I pass "name" parameter for the page containing item name and URL shows as example.com/[clicked_item_name]?name=[name_parameter]. Is it possible to remove the parameter part to show only example.com/[clicked_item_name] in URL. My purpose is use same URL for item detail pages whose URL does not change when item name is updated (For SEO purposes for each item)
I researched URL redirection but redirection approach is my not first preference. My preference is generate static URL for each item.
queryParams: {
'name': serializeParam(
listViewPlacesRecord.name,
ParamType.String,
),
'type': serializeParam(
listViewPlacesRecord.type,
ParamType.String,
),
'rating': serializeParam(
listViewPlacesRecord.rating,
ParamType.double,
),...

Related

xamarin forms shell doesn't navigate to nested view

I have a xamarin forms project which uses the new AppShell. I have a flyout menu with some menu items. One of the menu items is called e.g. MyComputer. Open it up it shows a list of folders. When I click on one folder a new page opens and shows a list of folders again - and so on - like nested folders. Unfortunately when using the new await Shell.Current.GoToAsync("folder"); to open a folder within a folder page nothing happens. No navigation is executed. It seems that it is not allowed to push the same page onto the navigation stack. However this worked with the "old" navigation myPage.Navigation.PushAsync(folderPage);. Because the original documentation for AppShell contains no restrictions for nested views I think that I'm missing something.
My AppShell.xaml
<FlyoutItem FlyoutDisplayOptions="AsMultipleItems" Route="app">
<ShellContent Title="MyComputer" Route="myComputer" ContentTemplate="{DataTemplate views:MyComputerPage}"/>
</FlyoutItem>
Register my folder page:
Routing.RegisterRoute("folder", typeof(FolderPage));
Calling the folder page from MyComputerPage (this works):
await Shell.Current.GoToAsync("folder?name=myFolder1");
Calling folder page from FolderPage (this is not working, nothing happens, no navigation executed):
await Shell.Current.GoToAsync("folder?name=myFolder1b");
I want to navigate like this:
MyComputerPage -> FolderPage -> FolderPage -> FolderPage -> ...
Just for better understanding how does the folder structure could look like:
myFolder1
myFolder1a
myFolder1aX
myFolder1aY
myFolder1aZ
myFolder1b
myFolder1c
myFolder2
myFolder3
EDIT:
#Junior Jiang - MSFT here you go:
About Relative Route and Passing Data , from shared gif and code , maybe you mistake something when using them.
if all the routes in an application are unique, navigation can be performed by only specifying the unique route name as a relative URI:
await Shell.Current.GoToAsync("TargetPageName");
//such as await Shell.Current.GoToAsync("myFolder1Page");
Data can be passed as query parameters when performing programmatic navigation.
await Shell.Current.GoToAsync($"TargetPageName?DefinedKeyName={BePassedValue}");
//such as Shell.Current.GoToAsync($"myFolder1Page?name={ValueOfmyFolder1Page}");
To receive data, the class that represents the page being navigated to, or the class for the page's BindingContext, must be decorated with a QueryPropertyAttribute for each query parameter:
[QueryProperty("Name", "name")]
public partial class myFolder1Page: ContentPage
{
public string Name
{
set
{
BindingContext = FolderData.FoldePages.FirstOrDefault(m => m.Name == Uri.UnescapeDataString(value));
}
}
...
}
So here your problem , first need to rename page name to fit this route method.
eg:
In MyComputerPage , when you navigate to myFolder1 page , you can register myFolder1 page's key be myFolder1 page.
Then if no data :
await Shell.Current.GoToAsync("myFolder1");
Pass data :
await Shell.Current.GoToAsync($"myFolder1?name={ValueOfmyFolder1}");
When this working and next page registering as same,then have entered in myFolder1 page ,next want to navigate to myFolder1a page , should write as follow:
await Shell.Current.GoToAsync("myFolder1a");//no data
await Shell.Current.GoToAsync($"myFolder1a?name={ValueOfmyFolder1a}");// pass data
Next , want to navigate to myFolder1aX page ,should write as follow:
await Shell.Current.GoToAsync("myFolder1aX");//no data
await Shell.Current.GoToAsync($"myFolder1aX?name={ValueOfmyFolder1aX}");//pass data

Ionic 3 NavParams Pushing Data from Page 1 to Page 3

I’m working on an application with multiple different pages and I need some help.
My application retrieves data from a database in Parse, and I am using providers in order to share this data to my other pages.
My main page (Page 1) asks the user to select a city. Based on the user’s selection, the next page (Page 2) will display data specific to that city, and also has links to resources that will lead to Page 3.
My issue is that Page 3 lists data for all the cities, instead of the city that was selected in Page 1.
Is it possible to pass the data from page 1, to page 2, and page 3?
So far, I have tried this:
Page 1:
selectCity(item) {
this.navCtrl.push( {item : item} };
}
Page 2:
city: any;
this.city = this.navParams.get(‘item’);
// there is an array ‘resource’ which contains names of different pages. this method pushes the selected page.
selectResource() {
this.navCtrl.push(resource.page)
}
Page 3:
city: any;
this.city = this.navParams.get(‘item’);
When I try to display the value of this.city in the console log, it says undefined.
Pushing a page and adding parameter like so:
this.navCtrl.push(resource.page, {item: item});
Please note that you are missing the second parameter item on page 2 on selectResource()
Retrieve the data on page 3 (in the constructor for instance) like so
this.city = this.navParams.get('item');
Please also note, that you may want to use an provider. This allows you to share data throughout the application.
Here you will find more info on that:
https://www.gajotres.net/ionic-2-sharing-data-between-pagescomponents/2/

Configure the Backend fields in typo3

I'am working with Typo3 V8
And I need to add some extra fields in BE so a have created an extension that allow me to add extra fields and it's working fine.
My problem is
All the fields are showing in all pages
some fields shouldn't be appearing in all pages
For example my home page contain a slider so in BE I have fields for uploading images but in other pages I don't need these fields to be shown.
You could add a special doktype that has the extra fields.
Let's assume it will be doktype 163, then in ext_localconf.php add:
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addUserTSConfig(
'options.pageTree.doktypesToShowInNewPageDragArea := addToList(163)'
);
to add it to the list of page types above the pagetree.
In the same file register the icon for the doktype:
\TYPO3\CMS\Core\Utility\GeneralUtility::makeInstance(
\TYPO3\CMS\Core\Imaging\IconRegistry::class
)->registerIcon(
'apps-pagetree-mytype',
TYPO3\CMS\Core\Imaging\IconProvider\SvgIconProvider::class,
[
'source' => 'EXT:' . $extKey . '/Resources/Public/Icons/Mytype.svg',
]
);
(Of course you need to add your svg image or use a different icon provider to register a bitmap)
In Configuration/TCA/Overrides/pages.php put:
\TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addTcaSelectItem(
'pages',
'doktype',
[
'Page type name',
163,
'apps-pagetree-mytype'
],
'1',
'after'
);
$GLOBALS['TCA']['pages']['ctrl']['typeicon_classes'][163] = 'apps-pagetree-mytype';
Instead of adding your custom fields with a call to \TYPO3\CMS\Core\Utility\ExtensionManagementUtility::addToAllTCAtypes() you add them with:
$GLOBALS['TCA']['pages']['types'][163]['showitem'] =
$GLOBALS['TCA']['pages']['types'][\TYPO3\CMS\Frontend\Page\PageRepository::DOKTYPE_DEFAULT]['showitem']
. 'the list with your new fields';
This basically copies the fields from the default page type and adds them to your custom doktype.
Of course it's nicer to have the name of the page type in an XLIFF file and to have the doktype number as a constant in your code, but that's for you to add.
Based on the doktype you can render whatever the new fields are for.
Hopefully this was the complete list of settings for adding a page type :-)

What tags to use to display one item ONLY in the template?

am using helper in my template like this
Template.walkthrough.helpers({
item: function () {
// some code here
}
});
if item were more than one item, i would user {{#each}} {{/each}} to navigate through all the items in the "item" and use {{elementName}} to display the element value i want.
My problem is that item has only one document value. what is the correct tags to use in the template to display "item" information?
Use the {{item.property}} syntax in the HTML. For example, if you return a post from your collection of posts, subsequently this post has a title, in order to display it in the HTML use {{post.title}}

Validation Forms that were loaded via Ajax into jquery-ui tabs

I'm using jquery-ui tab example to add extra tabs. I changed that code to be able to add tabs that load a form via Ajax. I was able to create that just changing these:
var $tabs = $( "#tabs").tabs({
cache: true,
tabTemplate: "<li><a href='formularioAgricola.php' id='#{label}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>"
//ajaxOptions: a
});
So I changed the tabTemplate to load the same Form always.
My problem is that I'm not sure how to retrieve, either to tell that every tag from that form use jquery-ui stuff, like buttons, datepickers, etc.
In a regular form I would do something like:
$("#btnRevisar").button()
But when we talk about form load via Ajax it is different.
and also, how can I try to differ one form from other one, if they are all named with the same name, is it possible?
Thanks guys
Carlos.
Within the tabs docs page, tab titled "Events" there is a "load" event. The "ui" argument gives you access to an object that includes the current panel that is loaded. If you are using same ID on forms, beware that ID's must be unique in a page.
var $tabs = $( "#tabs").tabs({
cache: true,
tabTemplate: "<li><a href='formularioAgricola.php' id='#{label}'>#{label}</a> <span class='ui-icon ui-icon-close'>Remove Tab</span></li>",
/* add new option for load event*/
load: function( event, ui){
var $currTabContentPanel=$(ui.panel);
/* only look in currently loaded content for formClass*/
$currTabContentPanel.find('.formClass').doSomething()
}
});