Designing Real-world Responsive Apps In Power Apps - Part 1

Поделиться
HTML-код
  • Опубликовано: 12 дек 2024

Комментарии • 62

  • @StephMarshall
    @StephMarshall  Год назад +3

    🎨ColorSpace - mycolor.space
    Microsoft Article - Create responsive layouts in canvas apps - learn.microsoft.com/en-us/power-apps/maker/canvas-apps/create-responsive-layout#adapting-layout-for-device-size-and-orientation
    Font Size - Switch(HomeScreen.Size ,ScreenSize.Small,20,ScreenSize.Medium,24,28)
    Welcome Text Code - If(Text(Now(),"am/pm")= "AM", "Good Morning " & First(Split(User().FullName," ").Value).Value, "Good Afternoon " & First(Split(User().FullName," ").Value).Value)&"!"
    Power App SVG Code - "data:image/svg+xml;utf8, "&EncodeUrl("

    ")
    SVG Code with Collection - "data:image/svg+xml;utf8, "&EncodeUrl(
    Substitute(
    LookUp(colCustomIcons,IconName = "Dashboard").IconData,
    "currentColor", GrayColorText
    )
    )

  • @vijaijs
    @vijaijs 9 месяцев назад +1

    Hi Steph, thank you so much for creating these videos on Power Apps responsive design. Your explanations are clear and concise, making it easy for viewers to understand the concepts and apply them in their own projects. The examples you provide are also very helpful in demonstrating how to implement responsive design effectively. Keep up the great work!
    👍

  • @Davo64207
    @Davo64207 Год назад +2

    Best design ever seen in powerapps

  • @mikedsjr
    @mikedsjr 9 месяцев назад

    I really appreciate the effort you put into this. There are many people i watch and everyone has there different twist to teaching. I really like how did this and for me, it helped me with a few things. I'm still trying to wrap my head around containers but this helped give me ideas.

  • @boyan9600
    @boyan9600 7 месяцев назад +2

    The SVG trick is very helpful. Thanks!

  • @dianaroald5881
    @dianaroald5881 Год назад +2

    Very informative and nicely structured. Looking forward to Part 2.

  • @MedariKeshava
    @MedariKeshava Год назад +1

    Thanks for this video, hardest part in power apps is building responsive app design for both tablet and phone form. Can you please continue this series and new ideas in power apps

  • @jray1429
    @jray1429 Год назад +1

    So far, this is awesome, thanks for the work and clear explanation. Great job!
    One the hardest problems I’m having is using galleries in containers. It seems to not want to scroll.

    • @StephMarshall
      @StephMarshall  Год назад

      It is really tricky and can be hard, just keep trying different configurations!

  • @GustavoSilva-vx2os
    @GustavoSilva-vx2os Год назад

    Hi Steph! Greattings from Brazil! I´m learning a lot with your videos. Thanks for sharing! You´re amazing!

  • @JapLomm
    @JapLomm 8 месяцев назад +1

    Liked immediately for the cat cleaning itself

  • @zerokhan858
    @zerokhan858 2 месяца назад

    this prove extremly useful!

  • @thatsweetfriend
    @thatsweetfriend Год назад

    I am glad I found your youtube channel..very informative...

  • @muthukumaran9541
    @muthukumaran9541 Год назад

    Wonderful walk-through. This is the one i was looking for. 👍
    Providing the links to the websites/tools you use is extremely appreciate.

  • @shareqkhan7319
    @shareqkhan7319 6 месяцев назад +2

    Good video

  • @jamiblenner790
    @jamiblenner790 3 месяца назад

    Loving this so much! I am having trouble on the 2nd containter where the button is either visible or the image is visible. The visibility is working amazing but when I look at it from a mobile view, the container itself is not getting smaller if that makes sense like it does on your video. So I can only see one image when I should see 4.

    • @StephMarshall
      @StephMarshall  3 месяца назад

      Do you mean the main menu buttons at the top? I'm about to do another video in this series shortly so if you can provide the code or more details I can perhaps add it to that.

  • @sharepointdeveloper602
    @sharepointdeveloper602 Год назад

    Very useful video and help us to create responsive design

  • @ashokpershad
    @ashokpershad Год назад +1

    Very useful video and help us to create responsive design but could you please keep your photo in video part of smaller size because its taking too much of real estate of video. Our main point of watching video is to learn powerapps. Hope you understand. Thanks

  • @ellimalasan6145
    @ellimalasan6145 Год назад

    Looking forward for more tutorial. I love it now im looking forward for more

    • @StephMarshall
      @StephMarshall  Год назад

      Part 2 is out there, if you have any questions let me know!

  • @DavidPhilip-yk2yl
    @DavidPhilip-yk2yl 5 месяцев назад +1

    Really awesome content Steph and Supefloof.
    I have been trying to get the encoded URL for the icons to work. I typed the code word for word, but I keep getting errors

    • @StephMarshall
      @StephMarshall  4 месяца назад

      Can you post the code you are using and I'll test?

  • @zulnordin8041
    @zulnordin8041 Год назад

    Subscribed after just seeing this video for less than a minute. Most probably your cat convinced me.😂

  • @General_halap
    @General_halap 11 месяцев назад +2

    Awesome content! Where have you been hiding?😂 I'll be sharing this video/channel on Nigeria power platform group 🙏

  • @aderibigbeadeyinka7136
    @aderibigbeadeyinka7136 10 месяцев назад +1

    Nice content. please can you do a video on how to make langing page for an app in power apps responsive?

    • @StephMarshall
      @StephMarshall  9 месяцев назад

      That sounds like a great idea!!

  • @silumkomagwa389
    @silumkomagwa389 Год назад

    Hi Steph, I really love how you code. It is so Brilliant. I would like to learn as much as I can from you. Tell me do you have a Mentorship program? Please tell me you do. Thanks

  • @codeaffection10
    @codeaffection10 9 месяцев назад

    i love your cat ,, me too having a cat.. 😍🤩😘☺

  • @lijunchen
    @lijunchen Год назад

    Thanks, Steph for the wonderful video. I was able to replicate most of what you instructed. But one big snag I met is that when in the vertical orientation of the phone mode, only the first icon (dashboard) is shown because the 2nd and the rest extend out of the screen. This icons container does not seem to respond to the phone orientation. Can you advice what may be the problem?

  • @OptimalTrainingGroup
    @OptimalTrainingGroup Год назад

    EXCELLENT!!

    • @StephMarshall
      @StephMarshall  Год назад

      Thank you so much! I'm glad you enjoyed it!

  • @kingquadri1850
    @kingquadri1850 Год назад

    Awesome

  • @lot5953
    @lot5953 Год назад

    Hi I have a question. Is there an option in PowerApps where we can disable PowerApps from executing our code statement during the design mode, not the preview mode? Because during the designing, my button disappears and that is because I write a statement to make it visible or hide if logic is met, and it executes correctly during the preview mode, but during the designing mode, I would like to see the button to give me better visibility of the layout. Otherwise I will have to comment out the logic statement so is there an option?

    • @StephMarshall
      @StephMarshall  11 месяцев назад +1

      Not that I'm aware of, I usually make them visible but make a note to re-do the code prior to go live. A crazy color on the item can help remind you! Happy coding :-)

    • @lot5953
      @lot5953 11 месяцев назад

      @@StephMarshall oh I see. I guess there is no option. Thank you for replying back to let me know. I appreciate that. It's also good that you're using the same approach to re-do the code before go live. Happy coding 😁

  • @venukolar7999
    @venukolar7999 Год назад

    Hi madam, I am not getting containers alined like how you are doing, it's getting overlapping even though how many times I tried, please suggest any alternative to overcome this issue. Looking forward to your reply.

  • @basehumax
    @basehumax 10 месяцев назад

    Still no update?

    • @StephMarshall
      @StephMarshall  9 месяцев назад

      I'm back at my video recording...stay tuned!

  • @MarieCastine
    @MarieCastine Год назад +1

    Why wouldn't you put all this in 1 variable? We use a lot of theme items and just found it easier to make it 1 variable with subitems. Easier to troubleshoot and maintain.
    Set(
    colThemes,
    {
    PrimaryTitle: Font.'Open Sans',
    PrimaryTitleSize: 16,
    PrimaryTitleWeightBold: FontWeight.Semibold,
    PrimaryColor: RGBA(1,46,103,1),
    PrimaryColorText: RGBA(51,51,51,1),
    SecondardTitle: Font.'Open Sans',
    SecondardTitleSize: 11,
    SecondardTitleWeight: FontWeight.Normal,
    SecondardColor: RGBA(245,121,107,1)
    }
    );

    • @wesDEVS
      @wesDEVS Год назад +3

      This can all be set in the App.Formulas property now. No need to run OnStart anymore.

    • @77ryan0341
      @77ryan0341 10 месяцев назад

      @@wesDEVS Is there a requirement when testing to "activate" this or should the formulas autoload?

  • @vito3074
    @vito3074 Месяц назад

    The 16:03 text = Switch(
    Language(),
    "en-US", "Good " & If(Text(Now(), "am/pm") = "am", "Morning", "Afternoon") & " " & First(Split(User().FullName, " ")).Value & "!",
    "fr-FR", "Bonjour " & First(Split(User().FullName, " ")).Value & "!",
    "es-ES", "Buenos " & If(Text(Now(), "am/pm") = "am", "Días", "Tardes") & " " & First(Split(User().FullName, " ")).Value & "!",
    "de-DE", "Guten " & If(Text(Now(), "am/pm") = "am", "Morgen", "Tag") & " " & First(Split(User().FullName, " ")).Value & "!",
    "it-IT", "Buongiorno " & First(Split(User().FullName, " ")).Value & "!",
    "zh-CN", "早上好 " & First(Split(User().FullName, " ")).Value & "!", // Simplified Chinese
    "zh-TW", "早安 " & First(Split(User().FullName, " ")).Value & "!", // Traditional Chinese
    "Good " & If(Text(Now(), "am/pm") = "am", "Morning", "Afternoon") & " " & First(Split(User().FullName, " ")).Value & "!" // Default fallback for any other language
    ) ///for 24:56 its now changed to ClearCollect(
    colCustomIcons,
    {
    IconName: "Home",
    IconData: "your url here to your svg icon in sharepoint library"
    }
    );