Table of Contents

Overview

Basics

Changing Visuals on Home Screen

Changing Images

How to Deep Link to a Certain Category

Sub Screens

Overview

Email: team@milkcrate.tech

Password: !mpactTech

It is a custom made application for MilkCrate to edit app screens.

Everything in bend is in JSON format, a lightweight data-interchange format.

It is easy for humans to read and write. It is easy for machines to parse and generate. 

Basically a chance for product people to write up front-end code…….

NOTE: DO NOT TOUCH anything that you have not been trained to use in Bend. Deleting a record, a line of code, a screen is all PERMANENT so be careful.

BASICS

Creating a screen:

• Open Bend and scroll down on the navigation bar to “screen”

• Look up “Do Good” in the search bar, click on it, and then copy the entire page by clicking on “ctrl + A” or “command + A” 

• Go back to “screen” on the navigation bar and hit “+ Add New”

• Delete the two brackets that are already on the page and paste the code you copied from "Do Good"

• Change the cName at the top  to the desired screen name, delete the _bmd at the bottom and delete the first  _id above “slug” 

(hint: the slug, first _id, and _bmd will be VERY IMPORTANT later for adding a screen within a screen)

• Log into the Master Admin (email: master@milkcrate.tech, password: MilkCrate4486), select the client you are creating a screen for, then highlight and copy the last part of the URL.  (Shown below:)

• Go back to your screen on bend and “ctrl+f”/ “command +f”  to look for “community”, remove the _id inside of it, paste the chunk of url you copied, then hit “Save”. Doing this action tells the system that your new screens are going to the specific and correct community. If you forget this step, this will confuse the system so make sure it is right.

CHANGING VISUALS ON HOME SCREEN

Tip: If you are looking for detailed instructions on different blocks within the screen, check out this help article: Home Screen Ticket (How To Complete)!

• This whole chunk of code, highlighted below, translates to the “view categories” button. In Bend, you control where a button deeplinks to which means “what happens when you click on the “view categories” button”? Will it take you to an action or another screen or a site?

Note: Whenever you make a button on a screen, you need to change the deeplink, background image url, and the size if needed.

CHANGING IMAGES

• Go to Canva under your clients folder and click on the buttons you want to edit. 

• Edit the button as needed.

• Download it with a “transparent background”

• Open up Airtable and under the “Branding/App store” spreadsheet, look for the client name and attach your button under the column “Buttons for Screens”.

• After attaching your image, open it up through Airtable and right click on your mouse or touchpad and choose “copy image address”

• Go back to Bend and paste it after background image. Make sure it's encased within the quotation marks.

HOW TO DEEP LINK TO A CERTAIN CATEGORY

First thing you need to do here is go to the Admin and log in to your client’s account.

• Go to Categories

1. 1. Find the correct category for the deeplink you are editing.
      1. Example: My client is Student’s Care and the deeplink I am editing is supposed to go to their “Patient Photo Consent” category. 
      2. So I am going to sign in to Student’s Care, go to Categories, and click on the “Patient Photo Consent” category. 
      3. Once I am in, I am going to copy and paste the slug and go back to Bend, find the deeplink I was editing, and paste that slug at the end of the deeplink after “search” so it should read “milkcrate://search/patientphotoconsent”.

SUB SCREENS

Now, comes the next level: screen within a screen.

This function tends to be used for clients that either have a lot of categories or subcategories that don’t fit in MilkCrate’s template, Do Good’s model of categories going out to actions. The good thing is, the steps above detailing how to make a screen are pretty much the same. However, the _bmd, slug, first _id, and the community id, and deeplink are vital in making the screens function correctly.

• First, after you complete all the steps with making a new home screen for a client detailed above, you will need to re-copy “Do Good’s” home screen.
• Second, you will need to go through the steps again of: deleting the _bmd, deleting the first _id, copying and pasting the correct community _id from Master Admin, renaming the “cName” and the “title” at the bottom of the screen.
• Third, you need to rename the slug. Pictured below, “home” is the slug. So, where it says “home”, rename it to be the new slug associated with the new screen name.
• For example, if you are making an additional screen called: “Patient Population” for a client called “Student’s Care”make the slug: “studentscare-patientpopulation” (“client’sname-screenname”)
• Fourth, add in the correct background image and deeplink in each “item”. Again, detailed above.

**Remember**: the first  _id is the one above “slug”. This one you delete, however, the “community _id” is the in the “community” section after “title” **

• Once you have all the correct background images  and deep links or websites, community id, slug, title, cName, have deleted the first _id and the _bmd then you need to find the new “slug” you created in this new screen and copy it (command+C).
• Next, go to your client’s home screen, find the button that is associated with this new screen and edit the deeplink to say: “milkcrate://screens/slugofnewscreen.
• For example, if I made a new screen called “Patient Population” for the client, Students Care with it’s slug called: “sc-patientpopulation”.
• I would first copy that slug then go to the homescreen I created for Students Care, find the category button called “Patient Population” and change the deeplink from “milkcrate://search/” to “milkcrate://screens/sc-patientpopulation”

The “search” in the deeplink tells the system to go to actions associated with a category while the “screens” in the deeplink tells the system to go to a new screen.