Is it possible to show a message when app downloads and updates the latest code using ionic deploy? - ionic-framework

I use the auto update method to update the app using an ionic pro, The problem is when there is a slow internet connection, The app takes more time to update the app, The splash screen is shown a long time.
Users think that there is a problem in the app and it hangs at the splash screen.
Is there any way to so show a message while updating the app at splash screen?
At least the user will know that the app is being updated.
<plugin name="cordova-plugin-ionic" spec="5.3.0">
<variable name="APP_ID" value="xxxxxx" />
<variable name="CHANNEL_NAME" value="Production" />
<variable name="UPDATE_METHOD" value="auto" />
<variable name="UPDATE_API" value="https://api.ionicjs.com" />
<variable name="MAX_STORE" value="2" />
<variable name="MIN_BACKGROUND_DURATION" value="30" />
</plugin>

I don't think it is possible to show updating on splash screen. but it is possible to show updating processing. here is full code for you.
Pro.deploy.checkForUpdate().then((update) => {
console.log(update);
if (typeof update !== 'undefined') {
if (update.available) {
let alert = self.alertCtrl.create({
title: 'Update Available',
message: 'There is an update available. Would you like to get it?',
buttons: [
{
text: 'Cancel',
role: 'cancel'
},
{
text: 'Ok',
handler: () => {
this.performManualUpdate();
}
}
]
});
alert.present();
}
}
});
async performManualUpdate() {
try {
let loader = this.loadingCtrl.create({
content: "Updating...",
});
loader.present();
await Pro.deploy.downloadUpdate((progress) => {
this.downloadProgress = progress;
})
await Pro.deploy.extractUpdate();
await Pro.deploy.reloadApp();
loader.dismiss();
} catch (err) {
console.log(err);
}
}

Related

Adding a SimplePlanningCalendar to a UI5 app fails with `getKey` error

When I add a SimplePlanningCalendar to my app, I got the following Error.
I added the calendar with a minimal configuration to my app.
<IconTabBar xmlns="sap.m"
id="idCategoryMenu"
selectedKey="Home"
headerMode="Inline"
stretchContentHeight="true"
applyContentPadding="false"
select=".onSelectCategory"
items="{
path: 'backend>/CategorySet',
parameters: {
expand: 'Reports'
},
sorter: {
path: 'Sort'
},
templateShareable: true
}">
<items>
<IconTabFilter id="myIconTabFilter" key="{backend>Uuid}" text="{backend>Name}">
<!-- ... -->
<SinglePlanningCalendar>
<appointments>
<unified:CalendarAppointment xmlns:unified="sap.ui.unified"
title="{title}"
startDate="{startDate}"
endDate="{endDate}"
/>
</appointments>
</SinglePlanningCalendar>
<!-- ... -->
</IconTabFilter>
</items>
</IconTabBar>
When I debug the app, I come to the following line inside the SinglePlanningCalendar.js where a key from the given vView parameter is requested, but the parameter only holds a string.
Anyone else had this problem before and knows why or how to solve this?
The problem is caused by the control implementation itself in the current version (1.71.21) I use for my development.
The fix in the commit 45696fe is available as of UI5 1.75.x.
Since I cannot change my version, I implemented the given solution in my package:
{ // Controller
onInit: function () {
// ...
this.calendarTemporaryFix(); // Not needed since UI5 1.75
},
calendarTemporaryFix: function () {
// SinglePlanningCalendar required from "sap/m/SinglePlanningCalendar"
const fnSetSelectedView = SinglePlanningCalendar.prototype.setSelectedView;
SinglePlanningCalendar.prototype.setSelectedView = function (vView) {
if (typeof vView === "string") {
vView = sap.ui.getCore().byId(vView);
}
return fnSetSelectedView.call(this, vView);
};
},
// ...
}

sapui5 Not able to display data in detail page

I have a problem to display data in my detail page. I've tried almost everything but its dosnt work. On main page everything looks fine. Routing work (display proper ID on network address).
Details.controller.js :
return Controller.extend("sapProject.controller.Details", {
onInit: function () {
var oTable = this.getView().byId("details");
var oModel = new sap.ui.model.json.JSONModel();
oModel.loadData("model/Object.json");
oTable.setModel(oModel);
var oRouter = sap.ui.core.UIComponent.getRouterFor(this);
oRouter.getRoute("Details").attachMatched(this._onRouteMatched, this);
},
_onRouteMatched : function (oEvent) {
var oArgs, oView;
oArgs = oEvent.getParameter("arguments");
oView = this.getView();
oView.bindElement({
path : "/Objects(" + oArgs.employeeId + ")",
events : {
dataRequested: function () {
oView.setBusy(true);
},
dataReceived: function () {
oView.setBusy(false);
}
}
});
},
and this is my Details.view.xml:
<Page
id="details"
title="{i18n>EmployeeDetailsOf} {FirstName} {LastName}"
showNavButton="true"
navButtonPress="onBack"
class="sapUiResponsiveContentPadding">
<content>
<Panel
width="auto"
class="sapUiResponsiveMargin sapUiNoContentPadding">
<headerToolbar >
<Toolbar>
<Title text="{i18n>EmployeeIDColon} {EmployeeID}" level="H2"/>
<ToolbarSpacer />
</Toolbar>
</headerToolbar>
<content>
<f:SimpleForm>
<f:content>
<Label text="{i18n>FirstName}" />
<Text text="{FirstName}" />
<Label text="{i18n>LastName}" />
</f:content>
</f:SimpleForm>
</content>
</Panel>
</content>
</Page>
I think you are binding an empty model to your detail view because probably the loadData function is not completed when you set the model on the Table.
Try to load your json file in the manifest (best option) or differ the setModel on the _onRouteMatched function (although I don't see any table in your detail view).
EDIT:
You can also use this code after oModel.loadData("model/Object.json");
oModel.attachEventOnce("requestCompleted", function(oEvent) {
// Here your file is fully loaded
});
Firstly I recommend you to bind like this:
var sObjectPath = this.getModel().createKey("Objects", {
ID: oArgs.employeeId
});
this._bindView("/" + sObjectPath);
...
}
_bindView: function (sObjectPath) {
//Todo: Set busy indicator during view binding
this.getView().bindElement({
path: sObjectPath,
parameters: {
},
events: {
change: this._onBindingChange.bind(this),
dataRequested: function () {
}.bind(this),
dataReceived: function () {
}.bind(this)
}
});
},
Secondly check if oArgs.employeeId has a valid value and also if the model is loaded with data, easily set a brekapoint or write console.log(this.getView().getModel().oData).

Alfresco Activiti Workflow: How to show popup dialog (message box) confirm in button?

I define own outcome-contraint for in workflow-model same as (File: test-model.xml):
<constraints>
<constraint name="my:myOutcomeOptions" type="LIST">
<parameter name="allowedValues">
<list>
<value>Approve</value>
<value>Reject</value>
</list>
</parameter>
</constraint>
</constraints>
And custom sequence-flows to workflow definition (File: test.bpmn20.xml):
<exclusiveGateway id="exclusiveGateway1"</exclusiveGateway>
<sequenceFlow id="flow3" name="Rejected" sourceRef="exclusiveGateway1" targetRef="Rejected">
<conditionExpression xsi:type="tFormalExpression"> <![CDATA[${test_a1approvecount < test_a2approvecount}]]> </conditionExpression>
</sequenceFlow>
I want to when I click button "Reject" showing popup confirm and after click button in popup confirm (OK and Cancel) display change to dashboard.
Please help me!
Thank you advance!
try to add this code in function "onClick".
var reviewTaskTransition = document.getElementsByName("prop_my_myOutcomeOptions")[0].value;
if(reviewTaskTransition == "Approve"){
Alfresco.util.submitForm(p_obj.getForm());
} else if(reviewTaskTransition == "Reject"){
Alfresco.util.PopupManager.displayPrompt({
title: "Rejection Popup",
text: "confirm?",
noEscape: true,
buttons: [{
text: "Yes",
handler: function submitRejection() {
Alfresco.util.submitForm(p_obj.getForm());
this.destroy();
}
},
{
text: "no",
handler: function() {
this.destroy();
document.location.reload(true);
},
isDefault: true
},
]
});
}
else{
Alfresco.util.submitForm(p_obj.getForm());
}
This is bit difficult to implement in alfresco.One more thing is you are confusing your self with back end and front end and you are confusing others too.
First things is , bpmn file is the backend stuff so what ever changes you make in that , it will not show pop up in front end.
For your requirement what you need to do is to make the workflow from configuration changes.Below are certain example where you can find the details of how you can customize the form.
https://hub.alfresco.com/t5/ecm-archive/task-done-transition/m-p/125211/thread-id/66680
https://docs.alfresco.com/6.1/references/dev-extension-points-workflow.html
You can google as well ;)

How can I have a Dynamic Image uri that is not always defined in React Native?

I am trying to get the filename of my image from a fetch to my rest service. But React tries to require the image before the call has the filename so ofcourse it can't find the image and gives me a 500 error back.
Is there any way to solve or work around this?
I am trying to get the filename from a json which it gets back from the fetch.
The function in which this is supposed to happen
nextPerson = () => {
var numberOfPersons = Object.keys(this.state.peopleList).length;
if (this.state.personIndex < numberOfPersons) {
person = this.state.peopleList[this.state.personIndex]
this.setState({currentPerson:person});
this.setState({image : require('../img/' + Object(this.state.currentPerson.gebruikerFoto).url)});
this.state.personIndex++;
}
}
The render of my component
render() {
var img = this.state.image;
return (
<View style={styles.container}>
<Image style={styles.image} source={img} />
<Text style={styles.persoonNaam}>{this.state.currentPerson.gebruikerNaam}</Text>
<Text style={styles.persoonBio}>{this.state.currentPerson.biografie}</Text>
<TouchableOpacity onPress={this.likePersoon}>
<Text>Like</Text>
</TouchableOpacity>
</View>
);
}
You need to keep your component in loading state, by rendering a shimmer component (react-native-shimmer) or just use ActivityIndicator from react native, until your api call finishes. Once the data is available you can render the Image component.
render() {
if (!this.state.imageUri) return <ActivityIndicator />; // keep showing the loader until the api call is done. Update the state once the call is successful.
return (
<Image /> // your image component
)
see this example:
renderItem = ({item})=>{
return(
<TouchableOpacity onPress={ () => this._openViewPage(item.id, item.cat_id,this.state.token)} style={styles.boxContainer}>
<View style={styles.BoxLeft}>
<H1>{item.title}</H1>
<H2 style={{flexWrap: 'wrap', textAlign: 'right',}}>{item.short_description}</H2>
</View>
<View style={styles.boxRight}>
<Image source={{uri: item.image}} style={{width: 100, height: 100 }} />
</View>
</TouchableOpacity>
)
}
annd in the render of your component you can use it:
<FlatList
data= {this.state.dataSource}
renderItem={this.renderItem}
keyExtractor = { (item, index) => index.toString() }
style={{marginBottom:100}}
/>

How do facebook & instagram update the likes count?

I'm facing an issue with state variables, this.setState({}) method updating the whole page while updating the like count on the card, but Facebook & Instagram are also using the same technology(if I'm not wrong), react native, I wonder how are they doing it.
When clicking a card in my FB feed, it is just updating the count, not the page. But in my program, its updating the whole page. I mean it is re-rendering the page while updating state variables.
Anybody know how to do it?
Thanks
Edits
This is exactly my problem, please see this video, all card is refreshing while clicking a heart.
import Icon from "react-native-vector-icons/MaterialIcons";
...
class GridViewClass extends Component {
...
_renderRow(item, sec, i) {
let addToFavourites = true;
let iconColor = "white";
for(const i in this.props.favoriteTopics){
if(item.topicName === this.props.favoriteTopics[i].topicName){
addToFavourites = false;
iconColor = "red";
}
}
// console.log("item values",item.topicName,item.topicDescription);
return (
<View key={"gridItemContainer_"+item.topicName+this.props.parentKey} style={styles.gridItem}>
<View key={"viewGrid_" + item.topicName+this.props.parentKey} style={styles.gridContainer}>
<TouchableWithoutFeedback key={"touch_" + item.topicName+this.props.parentKey} onPress={() => this.props.openSubCat(item.topicId, item.topicName)}>
<View key={"touchableContainer"+item.topicId+this.props.parentKey}>
<ProgressiveImage imageKey={"imageGrid_" + item.topicName+this.props.parentKey} source={{ uri: item.imageurl }} resizeMode={'stretch'} thumbnailresizeMode={'cover'} thumbnail={require("../../images/placeholder.png")} style={{ width: 170, height: 90, padding: 4, alignSelf: 'center' }} />
<View key={"textContainer"+item.topicId+this.props.parentKey} style={styles.textcontainer}>
<Text style={styles.catname}>{item.topicName}</Text>
<Text style={styles.description}>{item.topicDescription}</Text>
</View>
</View>
</TouchableWithoutFeedback>
<Icon key={"iconKey"+item.topicName+this.props.parentKey} name="favorite" ref={(ref)=>this.storeRowRef(ref)} size={30} color={iconColor} onPress={(event) => addToFavourites?this.addToMyTopics(event,item.topicName):this.removeFromMyTopics(event,item.topicName)}/>
</View>
</View>
)
}
}