I'm building a app with just javascript, no typescript, no angular, no vuejs.
Is it possible to use NativeScript UI with pure javascript ?
I'm trying to use radlistview, and the only code I find is on TypeScript.
If not, then what I'm trying to do is just output a list and tapAction on each item to navigato to single item with the data passed of that item.
Anyone have any idea how to do that?
Yes, it's very possible. In many of the examples you'll have to mentally translate from typescript to javascript. I use javascript projects myself and had to make those translations myself when I was first starting. It can be a little confusing.
Irrespective of TypeScript / Angular / Vue, end of the code is complied to plain JavaScript only. These are just modern frameworks / libraries those help to speed up development & make things easier.
The TypeScript code can be compiled into JavaScript using TypeScript CLI, there are even several sites do this within your browser.
RadListView: ViewModel
var frame = require("tns-core-modules/ui/frame");
var observableModule = require("tns-core-modules/data/observable");
function HomeViewModel() {
var viewModel = observableModule.fromObject({
countries: [
{ name: "Australia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/au.png" },
{ name: "Belgium", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/be.png" },
{ name: "Bulgaria", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/bg.png" },
{ name: "Canada", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ca.png" },
{ name: "Switzerland", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ch.png" },
{ name: "China", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/cn.png" },
{ name: "Czech Republic", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/cz.png" },
{ name: "Germany", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/de.png" },
{ name: "Spain", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/es.png" },
{ name: "Ethiopia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/et.png" },
{ name: "Croatia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/hr.png" },
{ name: "Hungary", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/hu.png" },
{ name: "Italy", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/it.png" },
{ name: "Jamaica", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/jm.png" },
{ name: "Romania", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ro.png" },
{ name: "Russia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ru.png" },
{ name: "United States", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/us.png" },
],
onItemTap: function (args) {
var bindingContext = args.view.bindingContext;
console.log(bindingContext.name);
},
});
return viewModel;
}
module.exports = HomeViewModel;
Playground Sample
Related
I need to implement a scenario where type ahead search makes a call to my remote api and fills in the choice list. This works fine the if adaptive card is sent directly in the chat. But this not work inside if the adaptive card is sent in the task module.
Steps
Following is the message which is sent for adaptive card
const card = CardFactory.adaptiveCard({
type: 'AdaptiveCard',
body: [
{
type: 'RichTextBlock',
inlines: [
{
type: 'TextRun',
text: 'Test',
weight: 'bolder',
},
{
type: 'TextRun',
text: 'Test',
}
],
separator: parseInt(index) === 0,
spacing: parseInt(index) === 0 ? 'extraLarge': 'default',
},
{
title: 'Update',
type: 'Action.Submit',
data: {
msteams: {
type: 'task/fetch'
},
id: 'Upate Id',
buttonText: 'Update',
}
}
],
$schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
version: '1.5',
})
Following is card which is sent in task module
const card = CardFactory.adaptiveCard({
$schema: 'http://adaptivecards.io/schemas/adaptive-card.json',
version: '1.5',
type: 'AdaptiveCard',
body: [
{
"columns": [
{
"width": "stretch",
"items": [
{
"choices": [
{
"title": "Static Option 1",
"value": "static_option_1"
},
{
"title": "Static Option 2",
"value": "static_option_2"
},
{
"title": "Static Option 3",
"value": "static_option_3"
}
],
"isMultiSelect": false,
"style": "filtered",
"choices.data": {
"type": "Data.Query",
"dataset": "npmpackages",
"testkey": "harkirat"
},
"id": "choiceselect",
"type": "Input.ChoiceSet"
}
],
"type": "Column"
}
],
"type": "ColumnSet"
}
],
actions: [
{
type: 'Action.Submit',
title: 'Save',
data: {
privateMeta,
replyToId
}
}
]
});
Following is the onActivityInvoke code:-
async onInvokeActivity(context: TurnContext): Promise<InvokeResponse<any>> {
if (context.activity.name === 'task/fetch') {
const result = await this.handleTeamsTaskModuleFetch(context, {
replyToId: context.activity.replyToId,
data: context.activity.value.data
});
return {
status: 200,
body: result
}
}
if (context.activity.name == 'application/search') {
const successResult = {
status: 200,
body: {
"type": "application/vnd.microsoft.search.searchResponse",
"value": {
"results": [
{
"value": "FluentAssertions",
"title": "A very extensive set of extension methods"
},
{
"value": "FluentUI",
"title": "Fluent UI Library"
}
]
}
}
}
return successResult;
}
}
Note that the activityInvoke function is not called when I enter the search text in my input box. However, if I send this card directly i.e without task module and directly in chat it works just fine.
Can someone please help me understand if I am missing something, is this a bug or the feature itself is not supported?
Suppose that you have a JSON file that contains data like this:
[
{
name: 'Data Groups',
},
{
name: 'Transaction start Filter',
},
{
name: 'Filter',
},
{
name: 'Graph, Tables',
},
{
name: 'Trending with filters',
},
{
name: 'Graph, area & Pie',
},
]
How to read it using cypress and print the name one by one using cypress?
You can do something like this:
var arr = [
{
name: 'Data Groups',
},
{
name: 'Transaction start Filter',
},
{
name: 'Filter',
},
{
name: 'Graph, Tables',
},
{
name: 'Trending with filters',
},
{
name: 'Graph, area & Pie',
},
]
for (var index in arr) {
cy.log(arr[index].name)
}
Test Runner Screenshot:
If you want to read from a JSON file which is present somewhere in your repo you can:
//If the file is in fixtures folder
cy.fixture('data.json').then((data) => {
for (var index in data) {
cy.log(data[index].name)
}
})
//If the file is somewhere else in repo
cy.fixture('path to file/data.json').then((data) => {
for (var index in data) {
cy.log(data[index].name)
}
})
If this is your test data, you can iterate over the array and dynamically create a test case for each object in the array:
[
{
"name": "Data Groups"
},
{
"name": "Transaction start Filter",
},
{
"name": "Filter",
},
{
"name": "Graph, Tables",
},
{
"name": "Trending with filters",
},
{
"name": "Graph, area & Pie",
}
].forEach(data => {
it(`Test ${JSON.stringify(data)}`, () => {
cy
.log(data.name);
});
});
And the result from test runner:
Just beware that you left out one bracket, so your data is not a valid JSON.
I have a Gatsby application pulling data from Sanity.
This is Sanity's schema for the course.js:
import video from './video'
export default {
// Computer name
name: `courses`,
// Visible title
title: `Courses`,
type: `document`,
fields: [
{
name: `title`,
title: `Course title`,
type: `string`,
description: `Name of the course`
},
{
name: `slug`,
title: `slug`,
type: `slug`,
options: {
source: `title`,
maxLength: 100,
}
},
{
name: `price`,
title: `Price`,
type: `number`
},
{
name: `thumbnail`,
title: `Thumbnail`,
type: `image`,
options: {
hotspot: true,
}
},
{
name: `playlist`,
title: `Playlist`,
type: `array`,
of: [
{
title: `Video`,
name: `video`,
type: `video`,
}
]
},
]
}
And this is Sanity's schema for video.js:
export default {
// Computer name
name: `video`,
// Visible title
title: `Video`,
type: `object`,
fields: [
{ name: `title`, type: `string`, title: `Video title` },
{ name: `url`, type: `url`, title: `URL` },
{ name: `public`, title: `public`, type: `boolean`, initialValue: false }
]
}
This Gatsby page query:
{
allSanityCourses {
nodes {
title
price
playlist {
url
title
public
}
}
}
}
Results in:
{
"data": {
"allSanityCourses": {
"nodes": [
{
"title": "Master VS Code",
"price": 149,
"playlist": [
{
"url": "https://www.youtube.com/watch?v=PRz1Nv9GUzs",
"title": "Introduction",
"public": true
},
{
"url": "https://www.youtube.com/watch?v=PRz1Nv9GUzs",
"title": "Philosophy",
"public": false
},
{
"url": "https://www.youtube.com/watch?v=PRz1Nv9GUzs",
"title": "Tech and Tools",
"public": false
},
{
"url": "https://www.youtube.com/watch?v=PRz1Nv9GUzs",
"title": "Integration",
"public": true
},
{
"url": "https://www.youtube.com/watch?v=PRz1Nv9GUzs",
"title": "Extensions",
"public": false
}
]
}
]
}
},
"extensions": {}
}
To prevent the url field from being injected into the React component this Gatsby page query runs on (because these urls are paid for), I need to remove it, if the public field is set to false.
I've tried inserting this into gastby-node.js:
exports.createSchemaCustomization = ({ actions, schema }) => {
const { createTypes } = actions
const typeDefs = [
schema.buildObjectType({
name: "SanityCourses",
fields: {
playlist: {
type: "[SanityVideo]",
url: {
type: "String",
resolve: (source) => "nope"
},
},
},
interfaces: ["Node"],
}),
]
createTypes(typeDefs)
}
And:
exports.createResolvers = ({ createResolvers }) => {
const resolvers = {
SanityCourses: {
playlist: {
type: "[SanityVideo]",
url: {
type: "String",
resolve(source, args, context, info) {
return "nope"
},
}
},
},
}
createResolvers(resolvers)
}
But neither seems to work. The url field returns the url as always. The resolvers don't even seem to fire (I've tried putting console.log()'s in them).
Any help on how to remove the url field if the public field is set to false, or general direction to go in would be very appreciated.
Ditch the attempt in createSchemaCustomization since you don't need to customize the schema here (though I believe there is a way to achieve what you want using it, it is not expected that the data in it is sourced from existing nodes, and this undeclared dependency can create caching issues).
Then update your createResolvers function to something like this:
exports.createResolvers = ({ createResolvers }) => {
createResolvers({
SanityVideo: {
safeUrl: {
type: "String",
resolve: (source, args, context, info) => source.public ? source.url : null
},
},
})
}
I don't believe resolvers can replace schema-originated nodes (fields), hence using safeUrl instead of url
The type you are adding a field to is SanityVideo, and it doesn't matter what the parent node is—this will apply to all instances of SanityVideo in your data
I am following this tutorial.
I have trips.json in my data folder
[
{
"img": "../assests/images/bahamas.jpg",
"name": "Bahama Beach"
},
{
"img": "../assests/images/china.jpg",
"name": "Chinese Palace"
},
{
"img": "../assests/images/dubai.jpg",
"name": "dubai"
},
{
"img": "../assests/images/monke.jpg",
"name": "monke",
"alt": "monke monke monke monke"
}
]
Here is my gatsby-config.js
module.exports = {
siteMetadata: {
title: `My Gatsby Project`,
description: `Made with Gatsby.`,
author: `#gatsbyjs`,
siteUrl: `https://gatsbystarterdefaultsource.gatsbyjs.io/`,
},
plugins: [
`gatsby-transformer-json`,
{
resolve: `gatsby-source-filesystem`,
options: {
path: `./src/data`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `images`,
path: `${__dirname}/src/assets/images`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `videos`,
path: `${__dirname}/src/assets/videos`,
},
},
{
resolve: `gatsby-plugin-styled-components`,
options: {
// Add any options here
author: `me`,
},
},
`gatsby-plugin-react-helmet`,
`gatsby-plugin-image`,
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,
{
resolve: `gatsby-plugin-manifest`,
options: {
name: `gatsby-starter-default`,
short_name: `starter`,
start_url: `/`,
background_color: `#663399`,
theme_color: `#663399`,
display: `minimal-ui`,
icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
},
},
`gatsby-plugin-gatsby-cloud`,
// this (optional) plugin enables Progressive Web App + Offline functionality
// To learn more, visit: https://gatsby.dev/offline
// `gatsby-plugin-offline`,
],
}
At localhost:8000/__graphql, I am getting a checkbox for "img."
However, the tutorial makes extensive use of many properties within the "img" attribute.
I have tried to stop the process, do gatsby clean and restart the process.
So I want to figure out why I am not seeing this and how I can get this drop-down to appear on my screen.
Solved it by adding the following to gatsby-node.js
exports.createResolvers = ({
actions,
cache,
createNodeId,
createResolvers,
store,
reporter,
}) => {
const { createNode } = actions
createResolvers({
StrapiPageContentArticleGallery: {
imageFile: {
type: `File`,
resolve(source, args, context, info) {
return createRemoteFileNode({
url: `${source.url}`, // for S3 upload. For local: `http://localhost:1337${source.url}`,
store,
cache,
createNode,
createNodeId,
reporter,
})
},
},
},
})
}
Is there anyone knows a link which shows an example on how to implement itemSelecting in Nativescript angular RadListViewhttps://docs.nativescript.org/ns-ui-api-reference/classes/radlistview#itemselecting?
Because I can't find any example. Thank you.
HTML
<RadListView class="list-group" [items]="countries" selectionBehavior="Press"
multipleSelection="true" (itemSelecting)="onItemSelecting($event)"
(itemDeselecting)="onItemSelecting($event)">
<ng-template let-country="item">
<FlexboxLayout flexDirection="row" class="list-group-item">
<Image [src]="country.imageSrc" class="thumb img-circle"></Image>
<Label [text]="country.name" class="list-group-item-heading"
verticalAlignment="center" style="width: 60%"></Label>
</FlexboxLayout>
</ng-template>
</RadListView>
TS
import { ListViewEventData } from "nativescript-ui-listview"
import { Component } from "#angular/core";
#Component({
selector: "Home",
moduleId: module.id,
templateUrl: "./home.component.html",
styleUrls: ["./home.component.css"]
})
export class HomeComponent {
countries: { name: string, imageSrc: string }[] = [
{ name: "Australia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/au.png" },
{ name: "Belgium", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/be.png" },
{ name: "Bulgaria", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/bg.png" },
{ name: "Canada", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ca.png" },
{ name: "Switzerland", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ch.png" },
{ name: "China", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/cn.png" },
{ name: "Czech Republic", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/cz.png" },
{ name: "Germany", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/de.png" },
{ name: "Spain", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/es.png" },
{ name: "Ethiopia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/et.png" },
{ name: "Croatia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/hr.png" },
{ name: "Hungary", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/hu.png" },
{ name: "Italy", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/it.png" },
{ name: "Jamaica", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/jm.png" },
{ name: "Romania", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ro.png" },
{ name: "Russia", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/ru.png" },
{ name: "United States", imageSrc: "https://play.nativescript.org/dist/assets/img/flags/us.png" },
];
onItemSelecting(args: ListViewEventData): void {
console.log(args.view.bindingContext.name);
args.returnValue = args.index > 5;
}
}
Note: It seems to be buggy, at least on Android. Second tap fails to fire itemSelecting event and marks the item as selected. A workaround could be found at nativescript-ui-feedback/issues/181